在 html/getmdl 中关闭对话框

Question

很抱歉问了这个非常基本的问题，但我并不完全了解网络应用程序中的对话框行为（尤其是 getmdl）。

是否有任何简单的解决方案来消除 Dialog when clicked outside? And are there any further information good to know? The docs 没有太大帮助。

示例代码：

  <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>

提前致谢。

Answer 1

找到解决方案（不知道这是否是最佳实践，但它按预期工作）

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();
    }
});
}

在 html/getmdl 中关闭对话框

dismiss Dialog in html / getmdl

html

web-applications

dialog

material-design-lite