[英]MDL Modal Dialog click behind modal background
I have created a modal dialog using Material Design Lite from https://getmdl.io/components/#dialog-section . 我已经从https://getmdl.io/components/#dialog-section使用Material Design Lite创建了一个模态对话框。 But I'm facing a problem that the area outside the dialog is not clickable.
但是我面临一个问题,对话框外部的区域不可单击。
I have a logout button outside the modal which I want the user to click when he wants to logout. 我在模态之外有一个注销按钮,我希望用户在要注销时单击它。 Also, I do not want to hide the modal.
另外,我不想隐藏模式。
$(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>
How can I make the background of the modal clickable? 如何使模式背景可点击?
To make the Dialog background clickable use dialog.show();
要使对话框背景可点击,请使用
dialog.show();
instead of dialog.showModal();
而不是
dialog.showModal();
$(document).ready(function() {
var dialog = document.querySelector('#main-dialog');
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
dialog.show();
});
From MDL Docs: 从MDL文档:
button.addEventListener('click', function() { dialog.showModal(); /* Or dialog.show(); to show the dialog without a backdrop. */ });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.