увольняют Dialog в html/getmdl

Question

извините за задание этого самого основного вопроса, но я не совсем понимаю поведение Dialog в веб-приложениях (особенно getmdl).

Есть ли какое-либо простое решение для отклонения Dialog при нажатии на него? И есть ли дополнительная информация, которую нужно знать? docs не так уж и полезны.

Пример кода:

<dialog class="mdl-dialog"> 
    <h4 class="mdl-dialog__title">Allow data collection?</h4> 
    <div class="mdl-dialog__content"> 
     <p> 
     Allowing us to collect data will let us get you the information you want faster. 
     </p> 
    </div> 
    <div class="mdl-dialog__actions"> 
     <button type="button" class="mdl-button">Agree</button> 
     <button type="button" class="mdl-button close">Disagree</button> 
    </div> 
    </dialog> 
    <script> 
    var dialog = document.querySelector('dialog'); 
    var showDialogButton = document.querySelector('#show-dialog'); 
    if (! dialog.showModal) { 
     dialogPolyfill.registerDialog(dialog); 
    } 
    showDialogButton.addEventListener('click', function() { 
     dialog.showModal(); 
    }); 
    dialog.querySelector('.close').addEventListener('click', function() { 
     dialog.close(); 
    }); 
    </script> 

Спасибо заранее.

Answer 1

Найдено решение (не зная, что это лучшая практика, но она работает, как ожидалось)

page.html

<li><a href="#" id="show-dialog-privacy-terms" onclick="showDialogPrivacyTerms()">Privacy & Terms</a></li> 
<dialog class="mdl-dialog" id="dialog-privacy-terms"> 
</dialog> 

dialog_privacy_terms.js

function showDialogPrivacyTerms() { 
console.log('showDialogPrivacyTerms'); 

var dialog = document.querySelector('dialog'); 
if (!dialog.showModal) { 
    dialogPolyfill.registerDialog(dialog); 
} 

dialog.showModal(); 
$(document).mouseup(function (e) { 

    var container = $("#dialog-privacy-terms"); 
    if (!container.is(e.target)) { 
     // don't hide if dialog is clicked 
     return; 
    } 

    if ($("#dialog-privacy-terms").is(":visible")) { 
     console.log('is open...'); 
     dialog.close(); 
    } 
}); 
}