I have created a modal dialog using Material Design Lite from https://getmdl.io/components/#dialog-section . 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();
instead of dialog.showModal();
$(document).ready(function() {
var dialog = document.querySelector('#main-dialog');
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
dialog.show();
});
See example
From MDL Docs:
button.addEventListener('click', function() { dialog.showModal(); /* Or dialog.show(); to show the dialog without a backdrop. */ });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.