Question

我正在研究Jquery Modal，它可以轻松打开href click 并显示弹出窗口我的 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>

我的输出是

enter image description here

如您所见，弹出窗口点击“淡入淡出和弹出”链接。

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

Answer 1

您在a点击事件中调用了曝光，在document.ready内调用它应该有效..

在document.ready function

中试试

$(document).ready(function() {  //or  $(window).load(function(){ 
    $('#myModal').reveal($(this).data());
});

Answer 2

您需要确保点击链接弹出窗口的所有内容都应该发生，并且页面加载也是如此。所以你可以做的只是在结束时添加.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

在页面加载时打开显示模型不起作用

2 个答案: