MDL 模态对话框在模态背景后面单击
MDL Modal Dialog click behind modal background
我使用 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>
如何使模态框的背景可点击?
要使对话框背景可点击,请使用 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. */
});
我使用 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>
如何使模态框的背景可点击?
要使对话框背景可点击,请使用 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. */ });