在页面加载时自动打开 jQuery ColorBox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14778561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open jQuery ColorBox automatically on page load
提问by Ranjit
I have used the colorbox jQuery lightbox for my lightbox. But in that one should click the button. I want automatically popup whenever the window is loaded.
我为我的灯箱使用了 colorbox jQuery 灯箱。但在那一个应该点击按钮。我想在窗口加载时自动弹出。
My code for light box is
我的灯箱代码是
<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>
Now I want to an automatic popup when the window is loaded.
现在我想在窗口加载时自动弹出。
回答by Mooseman
With the latest version of ColorBox, you use $.colorbox({inline:true, href:".ajax"});
Working demo: http://jsfiddle.net/34v22/
I also cleaned up your code a bit:
使用最新版本的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>
回答by user3609160
It worked, but i am not able to click on on the iframe page. I've put a form in the iframe.
它有效，但我无法点击 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>
回答by stillatmylinux
If you like, you can add your html directly in the jQuery call
如果你愿意，你可以直接在 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);
