MDL模態對話框點擊模態背景

Question

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

我有一個模式外的註銷按鈕，我希望用戶在他想註銷時點擊。另外，我不想隱藏模式。

$(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(); 
}); 

見example

---

從MDL文件：

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