dismiss Dialog in html / getmdl

Question

sorry for asking this very basic question, but I'm not completely aware of the Dialog behavior in web-apps (especially getmdl).

Is there any simple solution to dismiss a Dialog when clicked outside? And are there any further information good to know? The docs aren't that helpful.

Sample code:

  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Allow data collection?</h4>
    <div class="mdl-dialog__content">
      <p>
        Allowing us to collect data will let us get you the information you want faster.
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button">Agree</button>
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>

Thanks in advance.

Answer 1

Found a solution (not knowing if it's best practise, but it works as expected)

page.html

<li><a href="#" id="show-dialog-privacy-terms" onclick="showDialogPrivacyTerms()">Privacy & Terms</a></li>
<dialog class="mdl-dialog" id="dialog-privacy-terms">
</dialog>

dialog_privacy_terms.js

function showDialogPrivacyTerms() {
console.log('showDialogPrivacyTerms');

var dialog = document.querySelector('dialog');
if (!dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
}

dialog.showModal();
$(document).mouseup(function (e) {

    var container = $("#dialog-privacy-terms");
    if (!container.is(e.target)) {
        // don't hide if dialog is clicked
        return;
    }

    if ($("#dialog-privacy-terms").is(":visible")) {
        console.log('is open...');
        dialog.close();
    }
});
}