Dialog

xxxxxxxxxx
 
1
<ef-dialog id="d1" header="System Permissions" draggable opened>
2
  <p>Grant geolocation permissions?</p>
3
  <p>This will allow the application to see your real-time location at any point in time.</p>
4
</ef-dialog>
5
<div class="container">
6
  <ef-button onclick="document.querySelector(&apos;#d1&apos;).opened = true;">Open Dialog</ef-button>
7
</div>

1
 
1
​

xxxxxxxxxx
 
1
.container {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  width: 100%;
6
  height: 300px;
7
}

ef-dialog is a popup window designed to contain and display any HTML content. It provides modal and dragging functionality, and also allows custom footers and control buttons to be included.

Basic usage

Dialog can easily be launched by adding the opened property. If you want the dialog to open by default, include the opened attribute when you embed ef-dialog.

<ef-dialog id="dlg1" header="System Permissions">
  <p>Grant geolocation permissions?</p>
  <p>This will allow the application to see your real-time location at any point in time.</p>
</ef-dialog>

var dlg = document.getElementById('dlg1');
function showDialog(open) {
  dlg.opened = open;
}

The default behavior of ef-dialog is to display at the center of the viewport and to not be draggable. You can enable dragging by adding the draggable attribute or using the property setting.

xxxxxxxxxx
 
1
<ef-dialog id="d1" header="System Permissions">
2
  <p>Grant geolocation permissions?</p>
3
  <p>This will allow the application to see your real-time location at any point in time.</p>
4
</ef-dialog>
5
<div class="container">
6
  <ef-button onclick="openDialog(&apos;d1&apos;, true)">Draggable</ef-button>
7
  <ef-button onclick="openDialog(&apos;d1&apos;, false)">Fixed</ef-button>
8
</div>

xxxxxxxxxx
 
1
function openDialog(id, dragMode) {
2
  var dlg = document.getElementById(id);
3
  dlg.draggable = dragMode;
4
  dlg.opened = true;
5
}

xxxxxxxxxx
 
1
.container {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  width: 100%;
6
  height: 300px;
7
}
8
​
9
ef-button {
10
  margin: 0 5px;
11
}

<ef-dialog id="dlg1" header="System Permissions" draggable>
  <p>Grant geolocation permissions?</p>
  <p>This will allow the application to see your real-time location at any point in time.</p>
</ef-dialog>

Confirmed vs cancelled

You may want to detect if the user has closed the dialog by clicking the OK or Cancel button. You can listen to the opened-changed event and check the value of the confirmed property, which will be set to true if the user clicked the OK button to close the dialog.

xxxxxxxxxx
 
1
<ef-dialog id="d1" header="System Permissions" draggable opened>
2
  <p>Grant geolocation permissions?</p>
3
  <p>This will allow the application to see your real-time location at any point in time.</p>
4
</ef-dialog>
5
<div class="container">
6
  <ef-button onclick="document.getElementById(&apos;d1&apos;).opened = true;">Open Dialog</ef-button>
7
  <p id="close-result"></p>
8
  <p>
9
  </p>
10
</div>

xxxxxxxxxx
 
1
var dlg = document.getElementById('d1');
2
dlg.addEventListener('opened-changed', function(e) {
3
  document.getElementById('close-result').innerHTML = dlg.confirmed ? 'User clicked OK' : 'User clicked Cancel';
4
});

xxxxxxxxxx
 
1
.container {
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: center;
5
  align-items: center;
6
  width: 100%;
7
  height: 300px;
8
}

<ef-dialog id="d1" header="System Permissions">
  <p>Grant geolocation permissions?</p>
  <p>This will allow the application to see your real-time location at any point in time.</p>
</ef-dialog>

var dlg = document.getElementById('d1');
dlg.addEventListener('opened-changed', function (e) {
  if (dlg.confirmed) {
    // user clicked OK button
  }
  else {
    // user clicked Cancel button
  }
});

Customize footer content

The dialog provides default OK and Cancel buttons. To replace those buttons with your own content, assign content to the footer slot.

xxxxxxxxxx
 
1
<ef-dialog id="d1" header="System Permissions">
2
  <p>Grant geolocation permissions?</p>
3
  <p>This will allow the application to see your real-time location at any point in time.</p>
4
  <div slot="footer" style="padding: 15px 25px;">
5
    <ef-button style="width:100%" cta onclick="accept()">Accept</ef-button>
6
  </div>
7
</ef-dialog>
8
<div class="container">
9
  <ef-button onclick="document.getElementById(&apos;d1&apos;).opened = true;">Custom Dialog</ef-button>
10
</div>

xxxxxxxxxx
 
1
function accept() {
2
  document.getElementById('d1').opened = false;
3
}

xxxxxxxxxx
 
1
.container {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
  width: 100%;
6
  height: 300px;
7
}

<ef-dialog id="d1" header="System Permissions">
  <p>Grant geolocation permissions?</p>
  <p>This will allow the application to see your real-time location at any point in time.</p>
  <div slot="footer" style="padding: 15px 25px;">
      <ef-button style="width:100%" cta onclick="accept()">Accept</ef-button>
  </div>
</ef-dialog>

function accept () {
  // user clicked accept button, close dialog.
  document.getElementById('d1').opened = false;
}

Customize close behaviors

By default, ef-dialog will only close when the user clicks the OK or Cancel button, or presses the ESC key. However, you can allow the dialog to close when the user clicks outside of the dialog, or prevent the dialog from closing when the ESC key is pressed.

To close the dialog when the user clicks outside of the dialog, set the noCancelOnOutsideClick property to false.

<ef-dialog id="d1" header="System Permissions">
  <p>Grant geolocation permissions?</p>
  <p>This will allow the application to see your real-time location at any point in time.</p>
</ef-dialog>

document.getElementById('d1').noCancelOnOutsideClick = false;

To prevent the dialog from closing on ESC key press, add the no-cancel-on-esc-key attribute to ef-dialog.

<ef-dialog id="d1" header="System Permissions" no-cancel-on-esc-key>
  <p>Grant geolocation permissions?</p>
  <p>This will allow the application to see your real-time location at any point in time.</p>
</ef-dialog>