在页面加载时自动打开 jQuery ColorBox答案

【问题标题】：Open jQuery ColorBox automatically on page load在页面加载时自动打开 jQuery ColorBox
【发布时间】：2013-02-08 17:57:45
【问题描述】：

我已经为我的灯箱使用了颜色框 jQuery 灯箱。但在那一个应该点击按钮。我想在加载窗口时自动弹出。

我的灯箱代码是

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="../jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                $(".ajax").colorbox();
            });
        </script>
    </head>
    <body>

        <h2>Other Content Types</h2>
        <p><a class='ajax' href="../content/daisy.jpg" title="Homer Defined">Outside HTML (Ajax)</a></p>
</html>

现在我想在加载窗口时自动弹出。

【问题讨论】：

标签： jquery colorbox

【解决方案1】：

使用最新版本的ColorBox，您可以使用$.colorbox({inline:true, href:".ajax"});

工作演示：http://jsfiddle.net/34v22/

我还清理了你的代码：

<!doctype html>
<head>
    <title>My Automatic ColorBox</title>
    <link rel="stylesheet" type="text/css" href="../link/to/jquery.colorbox.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.colorbox.js"></script>
    <script>$(document).ready(function(){$.colorbox({inline:true, href:".ajax"});});</script>
</head>
<body>
    <h2>Other Content Types</h2>
    <div class='ajax' style='display:none'><a href="../content/daisy.jpg" title="Homer Defined">Outside HTML (Ajax)</a></div>
</body>

【讨论】：

【解决方案2】：

它有效，但我无法点击 iframe 页面。我已经在 iframe 中放置了一个表单。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<script>$(document).ready(function(){$.colorbox({inline:true, href:".ajax"});});
</script>

<script>
(function($){
       $(document).ready(function() {
             $.colorbox({innerWidth:600,innerHeight:500,html:'<iframe width=600 height=500 
                    src=masson-form.html>  </iframe>'});
                });
         })(jQuery);
</script>

【讨论】：

【解决方案3】：

如果你喜欢，你可以直接在jQuery调用中添加你的html

(function($){
    $(document).ready(function() {
        $.colorbox({innerWidth:420,innerHeight:315,html:'<iframe width=420 height=315 src=http://www.youtube.com/embed/eh-0knDpn5g frameborder=0 allowfullscreen></iframe>'});
    });
})(jQuery);

【讨论】：