Question

Fiddle：这是我问题的链接。

<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">close</a>
        <h2>Modal Box</h2>
    </div>
</div>

我想在页面加载时自动打开此模式框。

Answer 1

在javascript中试试这个：

window.onload = function () {
    document.getElementById("openModal").style.opacity = 1;
}

它不会在jsfiddle中工作，但它应该在你的页面中正常

Answer 2

似乎，最初ModalBox是隐藏的，可能是使用

display:hidden

然后

$(documnet).ready(function{
   $('#openModal').css('display','block')
});

Answer 3

由于您正在使用:target选择器，因此您只需在页面加载时设置窗口位置：

window.location.href = "#openModal";

http://jsfiddle.net/7LcRN/

在您的脚本实现中（jsFiddle会自动为您添加onLoad事件），您需要向页面加载添加一个事件来触发：

<body onload="window.location.href = '#openModal'">
    // Your HTML
</body>

或使用addEventListener：

window.addEventListener("load", function() {
    window.location.href = "#openModal";
});

我还删除了对load()功能的所有引用，这些引用并不存在。此外，<div>没有onload事件。

Answer 4

（该死的:target css lol）

onload的唯一方法是：iframe，img，body。 div没有它。

此外 - 您没有功能load，并且在单击div时没有任何功能。

你想要的是：删除load函数，因为它不存在并添加：

$(function(){

    $("a:first")[0].click(); //simulate the behaviour which will 
                             //trigger that css `.modalDialog:target{...}`
});

http://jsfiddle.net/RU5m8/10/

Answer 5

在页面加载时触发点击...

$(document).ready(function(e)
{
    $("a")[0].trigger('click');
});

Answer 6

在你的jsfiddle代码中做两处修改

步骤：1）添加和jquery版本表单下拉。

步骤：2）在代码中添加波纹管代码

       $(document).ready(function() {
         $('a').get(0).click();
      });

并看到它正常工作，它也可以在更新的js链接中使用＆＃34; http://jsfiddle.net/RU5m8/11/＆＃34;

我希望对你有所帮助

在页面加载时显示模式对话框

6 个答案: