Question

以下是我的代码，但仅当有人点击

时才会显示模态

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

Answer 1

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

将上述内容放在文件<{3}}中

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

这样，只要文档准备就绪，您的方法就会显示模态框

<强> .ready

希望这有帮助

Answer 2

你可以像下面这样做

function modalload(){

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

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

jQuery（document）.ready（function（）{

modalload（）;

}）;

然后你的模态将在页面加载后出现。您也可以通过调用计时器功能在网站加载一段时间后加载模态。

希望这能解决您的问题

Answer 3

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

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()，它就会在页面加载时运行。

模态出现在页面加载上

3 个答案: