Javascript 在页面加载时创建模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28773432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a modal window on page load
提问by 0pt1m1z3
I am using the Kube framework (http://imperavi.com/kube/) which includes a modal function. Unfortunately the documentation is kind of sparse or I am too dumb (http://imperavi.com/kube/tools/js-modal/).
我正在使用 Kube 框架 ( http://imperavi.com/kube/)，其中包含一个模态函数。不幸的是，文档有点稀疏，或者我太笨了（http://imperavi.com/kube/tools/js-modal/）。
They have sample code showing how to launch modals on button clicks, but I am trying to launch it on body load. Can anyone with either experience with Kube or a better understanding of JS/JQuery help me do that? I wan to make sure I can specify settings like width and blur.
他们有示例代码显示如何在按钮点击时启动模态，但我试图在身体负荷时启动它。任何有 Kube 经验或对 JS/JQuery 有更好理解的人都可以帮助我做到这一点吗？我想确保我可以指定宽度和模糊等设置。
I know there are many many modal plugins out there, but I am trying to limit my project to just this one framework.
我知道有很多模态插件，但我试图将我的项目限制在这个框架内。
回答by dowomenfart
This will run on window ready. http://jsfiddle.net/418hmnjy/2/. This uses no libraries Just HTML, CSS and JavaScript.
这将在窗口就绪时运行。http://jsfiddle.net/418hmnjy/2/。这不使用库，只使用 HTML、CSS 和 JavaScript。
HTML
HTML
<div id="modal">
<div class="modalconent">
<h1></h1>
<p>fasfsdfasfsfsdfsdfsdsffsd</p>
<button id="button">Close</button>
</div>
</div>
JavaScript
JavaScript
window.onload = function () {
document.getElementById('button').onclick = function () {
document.getElementById('modal').style.display = "none"
};
};
CSS
CSS
#modal {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
height: 100%;
width: 100%;
}
.modalconent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 80%;
padding: 20px;
}
