MDL模態對話框在模態背景后面單擊

Question

我已經從https://getmdl.io/components/#dialog-section使用Material Design Lite創建了一個模態對話框。 但是我面臨一個問題，對話框外部的區域不可單擊。

我在模態之外有一個注銷按鈕，我希望用戶在要注銷時單擊它。 另外，我不想隱藏模式。

 $(document).ready(function() { var dialog = document.querySelector('#main-dialog'); if (! dialog.showModal) { dialogPolyfill.registerDialog(dialog); } dialog.showModal(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <dialog class="mdl-dialog" id="main-dialog"> <h4 class="mdl-dialog__title">Select your .xlsx file:</h4> <div class="mdl-dialog__content"> <p> Your excel sheet must contain values in the form:<br/> <table border="1" style="margin:0 auto"> <tr> <td><font color="black"><b>PID No.</b></font></td> <td><font color="black"><b>Student Name</b></font></td> </tr> </table> </p> </div> <div class="mdl-dialog__actions"> <input id="list" type="file" required="yes" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"> </div> </dialog> 

如何使模式背景可點擊？

Answer 1

要使對話框背景可點擊，請使用dialog.show(); 而不是dialog.showModal();

$(document).ready(function() {
var dialog = document.querySelector('#main-dialog');
    if (! dialog.showModal) {
            dialogPolyfill.registerDialog(dialog);
    }
    dialog.show();
});

看例子

---

從MDL文檔：

 button.addEventListener('click', function() { dialog.showModal(); /* Or dialog.show(); to show the dialog without a backdrop. */ });