模式出现在页面加载中
[英]modal appears on page load
问题描述
Following is my code but the modal only appears when someone click on 
以下是我的代码，但模式仅在有人单击时显示
<a href="#" rel="modal-profile">open modal box</a>
I want to know how can i modify my following code so that my modal appears on the page load. 我想知道如何修改我的以下代码，以便使我的模式出现在页面加载中。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.noConflict();
// Position modal box in the center of the page
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px");
this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px");
return this;
}
jQuery(".modal-profile").center();
// Set height of light out div
jQuery('.modal-lightsout').css("height", jQuery(document).height());
// Fade in modal box once link is clicked
jQuery('a[rel="modal-profile"]').click(function() {
jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
});
// closes modal box once close link is clicked, or if the lights out divis clicked
jQuery('a.modal-close-profile, .modal-lightsout').click(function() {
jQuery('.modal-profile').fadeOut("slow");
jQuery('.modal-lightsout').fadeOut("slow");
});
});
</script>
<style type="text/css">
body {
color:#333;
background-color:#ec176c;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.modal-profile h2 {
font-size:2em;
letter-spacing:-1px;
}
.modal-profile {
display:none;
height: 250px;
width: 500px;
padding:25px;
border:1px solid #fff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background: #f2f2f2;
z-index:50;
}
.modal-lightsout {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
z-index:25;
background:#000;
}
a.modal-close-profile {
position:absolute;
top:-15px;
right:-15px;
}
a.modal-social {
margin:0 10px 0 0;
}
</style>
</head>
<body>
<div class="container">
<div class="modal-lightsout"></div>
<div class="modal-profile">
<h2>Nam liber tempor cum soluta nobis eleifend</h2>
<a href="#" title="Close profile window" class="modal-close-profile"><img border="0px" src="close.png" alt="Close profile window" /></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<a href="#" rel="modal-profile">open modal box</a>
</div>
</body>
</html>
3 个解决方案
解决方案1
1 2012-04-29 08:58:57
jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
Place the above in .ready for document 将以上内容放在.ready文件中
jQuery(document).ready(function () {
jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
});
This way your methods to show modal box will happen as soon as the document is ready 这样，显示模式框的方法将在文档准备好后立即发生
Hope this helps 希望这可以帮助
解决方案2
1 已采纳 2012-04-29 09:01:19
You can do this like bellow 你可以像下面这样
function modalload(){
jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
}
and call this in your page load like bellow 并在您的页面加载中调用它，例如波纹管
jQuery(document).ready(function () { jQuery（document）.ready（function（）{
modalload(); modalload（）;
}); }）;
and then your modal will appear after page load. 然后您的模式将在页面加载后显示。 you can also load the modal after some time of the site load by calling timer function. 您还可以在网站加载一段时间后通过调用计时器函数来加载模式。
Hope this will solve your problem 希望这能解决您的问题
解决方案3
1 2012-04-29 09:10:23
To make it load on only page load, just remove the click handler, like so: 要使其仅在页面加载时加载，只需删除点击处理程序，如下所示：
jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
To keep the click handler, and still make it open on page load, just trigger a click, like so: 要保持点击处理程序并使其在页面加载时仍保持打开状态，只需触发一次点击即可，如下所示：
jQuery('a[rel="modal-profile"]').click(function() {
jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
}).click();
Just add the .click() at the end of your function, at it will run on page load. 只需在函数的末尾添加.click() ，它将在页面加载时运行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.