模态出现在页面加载中 [英] 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>
推荐答案
您可以像下面这样
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
这篇关于模态出现在页面加载中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
