1

我正在开发 Jquery Modal，它可以在 href 点击时轻松打开并显示弹出窗口。
我的html页面是

<!DOCTYPE html>

    <head>
        <meta charset="utf-8" />
        <title>Reveal Demo</title>

        <link rel="stylesheet" href="reveal.css">   

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type="text/javascript" src="jquery.reveal.js"></script>

        <style type="text/css">
            body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
            .big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }
        </style>
            <script type="text/javascript">

                $(document).ready(function() {
                    $('a[data-reveal-id]').live( 'click',function(e) {
                        e.preventDefault();
                        var modalLocation = $(this).attr('data-reveal-id');
                        $('#'+modalLocation).reveal($(this).data());
                });
            });
        </script>

    </head>
    <body>

        <a href="#" data-reveal-id="myModal">
            Fade and Pop
        </a>    

        <div id="myModal" class="reveal-modal">
            <h1>Reveal Modal Goodness</h1>
            <p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
            <a class="close-reveal-modal">&#215;</a>
        </div>

    </body>
</html>

我的输出是

在此处输入图像描述

如您所见，单击“Fade and Pop”链接会打开此弹出窗口。

但我想在页面加载时打开这个弹出窗口。我尝试了很多，但我没有得到结果。我哪里出错了。

4

2 回答 2

2

你在a点击事件中调用显示，在document.ready应该工作中调用它..

在 document.ready 函数中尝试

$(document).ready(function() {  //or  $(window).load(function(){ 
    $('#myModal').reveal($(this).data());
});
于 2013-03-28T06:40:27.867 回答
0

您需要确保在点击链接弹出窗口和页面加载时都发生这些事情。所以你可以做的只是.click()在关闭结束时添加如下，看看这是否适合你。

$(document).ready(function() {
   $('a[data-reveal-id]').live( 'click',function(e) {
       e.preventDefault();
       var modalLocation = $(this).attr('data-reveal-id');
       $('#'+modalLocation).reveal($(this).data());
   }).click();
});//-^^^^^^^----------------add this
于 2013-03-28T06:52:56.640 回答