关闭html / getmdl中的对话框
关闭html / getmdl中的对话框
提问于 2017-02-02 17:01:14
很抱歉问了这个非常基本的问题，但我对web应用程序(特别是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>提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-02 20:05:47
找到了一个解决方案(不知道它是否是最佳实践，但它按预期工作)
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();
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41997962
复制相关文章
相似问题