0

以下是我的代码，但模式仅在有人点击时出现

<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>
4

3 回答 3

1 
jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);

将上述内容放入.ready for document

    jQuery(document).ready(function () {
         jQuery('.modal-profile').fadeIn("slow");
         jQuery('.modal-lightsout').fadeTo("slow", .5);
    });

这样，一旦文档准备好，您显示模态框的方法就会发生

演示

希望这可以帮助

于 2012-04-29T08:58:57.040 回答
1

你可以像下面这样做

function modalload(){

jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);
}

并在您的页面加载中调用它，如下所示

jQuery（文档）.ready（函数（）{

模态负载（）；

});

然后您的模式将在页面加载后出现。您还可以通过调用计时器函数在网站加载一段时间后加载模式。

希望这能解决你的问题

于 2012-04-29T09:01:19.720 回答
1

要使其仅在页面加载时加载，只需删除点击处理程序，如下所示：

jQuery('.modal-profile').fadeIn("slow");
jQuery('.modal-lightsout').fadeTo("slow", .5);

要保留点击处理程序，并在页面加载时仍使其打开，只需触发一次点击，如下所示：

jQuery('a[rel="modal-profile"]').click(function() {
    jQuery('.modal-profile').fadeIn("slow");
    jQuery('.modal-lightsout').fadeTo("slow", .5);
}).click();

只需.click()在函数末尾添加 ，它将在页面加载时运行。

于 2012-04-29T09:10:23.737 回答