Question

我正在使用Google的Material Design。

我已经放了一个对话框，但它似乎并没有在Safari中关闭。（它在Chrome中关闭）。

对话框：

<dialog class="mdl-dialog">
        <h4 class="mdl-dialog__title">Question Help</h4>
        <div class="mdl-dialog__content">
            <p>
                Help text will go here dynamically.
            </p>
        </div>
        <div class="mdl-dialog__actions">
            <button type="button" id="closeModal" class="mdl-button close">Close</button>
        </div>
    </dialog>

Javascript呈现对话框：

  let dialog            = document.querySelector('dialog');
  let showDialogButton  = document.querySelectorAll('.show-dialog');
  let i;

  if (! dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
  }

 for (i = 0; i < showDialogButton.length; ++i) {
   showDialogButton[i].addEventListener('click', () => {
     dialog.showModal();
   });
}

  dialog.querySelector('.close').addEventListener('click', function() {
  dialog.close();

}）;

我有console.log（）;在事件监听器内部，它不会进入该功能。但它正在拿起.close元素。所以我不认为事件监听器正在解雇？

对话框没有关闭的任何想法？

Answer 1

在<body>

下移动对话框

来自dialog polyfill docs：

模态对话框有局限性 -

他们应该是<body>的孩子，或者父母没有布局（又名，   没有位置绝对或相对元素）

Google的MDL - 对话框未在Safari

1 个答案: