在页面加载时显示模式对话框
[英]Show modal dialog on page load
问题描述
小提琴 ：这是我的问题的链接。
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">close</a>
<h2>Modal Box</h2>
</div>
</div>
我希望此模式框在页面加载时自动打开。
6 个解决方案
解决方案1
1 2014-03-13 08:43:44
在您的javascript中尝试一下：
window.onload = function () {
document.getElementById("openModal").style.opacity = 1;
}
它在jsfiddle中不起作用，但在您的页面中应该没问题
解决方案2
0 2014-03-13 08:38:10
看起来，最初ModalBox是隐藏的，可能使用
display:hidden
然后
$(documnet).ready(function{
$('#openModal').css('display','block')
});
解决方案3
0 2014-03-13 08:43:05
由于使用的是:target选择器，因此可以在页面加载时设置窗口位置：
window.location.href = "#openModal";
在脚本的实现中（jsFiddle自动为您添加一个onLoad事件），您将需要向页面加载中添加一个事件以触发此操作：
<body onload="window.location.href = '#openModal'">
// Your HTML
</body>
或使用addEventListener：
window.addEventListener("load", function() {
window.location.href = "#openModal";
});
我还删除了对您的load()函数的所有引用，该引用不存在。 另外， <div>没有onload事件。
解决方案4
0 2014-03-13 08:43:30
（该死的:target CSS大声笑）
具有onload的唯一方法是：Iframe，img，body。 div没有它。
另外-没有功能load并且单击div时也没有功能。
您想要的是：删除load功能，因为它不存在并添加以下内容：
$(function(){
$("a:first")[0].click(); //simulate the behaviour which will
//trigger that css `.modalDialog:target{...}`
});
解决方案5
0 2014-03-13 08:49:38
页面加载时触发点击...
$(document).ready(function(e)
{
$("a")[0].trigger('click');
});
解决方案6
0 2015-03-12 12:15:41
在您的jsfiddle代码中进行两项更改
步骤：1）您添加和jquery版本表格下拉。
步骤：2）在您的代码中添加以下代码
$(document).ready(function() {
$('a').get(0).click();
});
并查看它是否按需要工作，并且在更新的js链接中也提供了“ http://jsfiddle.net/RU5m8/11/ ”
我希望它对您有帮助
在页面加载时添加模态对话框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.