以下是我的代码，但只有当有人点击时才会出现模式
<a href="#" rel="modal-profile">open modal box</a>
我想知道如何修改以下代码，以便我的模式出现在页面加载上。
<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>
最佳答案
你可以像下面这样做
function modalload(){
jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
}
并在页面加载中调用它，如下所示
jQuery(文档).ready(function () {
模态加载();
});
然后你的模态将在页面加载后出现。您还可以通过调用计时器函数在网站加载一段时间后加载模式。
希望这能解决您的问题
关于javascript - 模式出现在页面加载时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10370906/