我正在使用包含模态函数的 Kube 框架 ( http://imperavi.com/kube/)。不幸的是,文档有点稀疏或者我太笨了(http://imperavi.com/kube/tools/js-modal/)。
他们有示例代码显示如何在按钮点击时启动模式,但我试图在 body 负载时启动它。任何有 Kube 经验或对 JS/JQuery 有更好理解的人都可以帮助我做到这一点吗?我想确保我可以指定宽度和模糊等设置。
我知道那里有很多模态插件,但我试图将我的项目限制在这个框架上。
最佳答案
这将在窗口准备就绪时运行。 http://jsfiddle.net/418hmnjy/2/ .这不使用任何库,仅使用 HTML、CSS 和 JavaScript。
HTML
<div id="modal">
<div class="modalconent">
<h1></h1>
<p>fasfsdfasfsfsdfsdfsdsffsd</p>
<button id="button">Close</button>
</div>
</div>
JavaScript
window.onload = function () {
document.getElementById('button').onclick = function () {
document.getElementById('modal').style.display = "none"
};
};
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;
}
关于javascript - 在页面加载时创建模态窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28773432/