Question

我使用https://getmdl.io/components/#dialog-section中的Material Design Lite创建了一个模态对话框。但我遇到的问题是对话框外的区域无法点击。

我在模态之外有一个注销按钮，我想让用户在他想要注销时点击。另外，我不想隐藏模态。

＆＃13;

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

＆＃13;

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

＆＃13;

如何使模态的背景可点击？

Answer 1

要使对话框背景可点击，请使用dialog.show();代替dialog.showModal();

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

请参阅example

来自MDL文档：

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

MDL模态对话框点击模态背景

1 个答案: