如何打开页面onload事件的jquery对话框

下面是完整的代码。我想在页面加载事件时打开此对话框，而不是单击。请协助我这件事。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a { 
    text-decoration:none; 
    color:#00c6ff;
}
h1 {
    font: 4em normal Arial, Helvetica, sans-serif;
    padding: 20px;  margin: 0;
    text-align:center;
}
h2 {
    color:#bbb;
    font-size:3em;
    text-align:center;
    text-shadow:0 1px 3px #161616;
}
#mask {
    display: none;
    background: #000; 
    position: fixed; left: 0; top: 0; 
    z-index: 10;
    width: 100%; height: 100%;
    opacity: 0.8;
    z-index: 999;
}
.login-popup{
    display:none;
    background: #fff;
    padding: 10px;  
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
}
img.btn_close {
    float: right; 
    margin: -28px -28px 0 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a.login-window').click(function() {
        // Getting the variable's value from a link 
        var loginBox = $(this).attr('href');
        //Fade in the Popup and add close button
        $(loginBox).fadeIn(300);
        //Set the center alignment padding + border
        var popMargTop = ($(loginBox).height() + 24) / 2; 
        var popMargLeft = ($(loginBox).width() + 24) / 2; 
        $(loginBox).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);
        return false;
    });
    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function() { 
      $('#mask , .login-popup').fadeOut(300 , function() {
        $('#mask').remove();  
    }); 
    return false;
    });
});
</script>
</head>
<body>
        <div class="btn-sign">
        <h2><a href="#login-box" class="login-window">Click me to Open the dialog box</a></h2>
        </div>
        <div id="login-box" class="login-popup">
        <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
         <h1>This is a dialog box !</h1> 
         <p>How to load it on page load event?</p>
        </div>

</body>
</html>

这里是完整的代码。我想在页面加载事件时打开此对话框，而不是单击。

删除$('a.login-window').click(function() {(和相应的})。这样DOM ready调用将打开它。var loginBox = $(this).attr('href');也需要修改为var loginBox = $('.login-window').attr('href');。在jQuery 1.7中，.live()已被弃用，取而代之的是.on()。并删除用于取消单击事件的第一个return false;。当然，这只会在加载时显示对话框，而不是在点击时显示对话框，但是你说的是"我想在页面加载时打开这个对话框而不是点击"，而不是"除了"。

<<p> jsFiddle例子/strong>
// Getting the variable's value from a link var loginBox = $('.login-window').attr('href'); //Fade in the Popup and add close button $(loginBox).fadeIn(300); //Set the center alignment padding + border var popMargTop = ($(loginBox).height() + 24) / 2; var popMargLeft = ($(loginBox).width() + 24) / 2; $(loginBox).css({ 'margin-top': -popMargTop, 'margin-left': -popMargLeft }); // Add the mask to body $('body').append('<div id="mask"></div>'); $('#mask').fadeIn(300); // When clicking on the button close or the mask layer the popup closed $('a.close, #mask').on('click', function () { $('#mask , .login-popup').fadeOut(300, function () { $('#mask').remove(); }); return false; });

删除环绕初始化代码的click处理程序:

$(document).ready(function(){
    // Getting the variable's value from a link 
    var loginBox = $(this).attr('href');
    //Fade in the Popup and add close button
    $(loginBox).fadeIn(300);
    //Set the center alignment padding + border
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 
    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });
    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);
    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').on('click', function() { 
      $('#mask , .login-popup').fadeOut(300 , function() {
        $('#mask').remove();  
    }); 
});

同样，在jQuery 1.9中，live函数已经被删除，所以您需要使用on。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript">
    // Getting the variable's value from a link 
var loginBox = $('.login-window').attr('href');
//Fade in the Popup and add close button
$(loginBox).fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
    'margin-top': -popMargTop,
        'margin-left': -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').on('click', function () {
    $('#mask , .login-popup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});
</script>
<style>
a {
    text-decoration:none;
    color:#00c6ff;
}
h1 {
    font: 4em normal Arial, Helvetica, sans-serif;
    padding: 20px;
    margin: 0;
    text-align:center;
}
h2 {
    color:#bbb;
    font-size:3em;
    text-align:center;
    text-shadow:0 1px 3px #161616;
}
#mask {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}
.login-popup {
    display:none;
    background: #fff;
    padding: 10px;
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    -moz-box-shadow: 0px 0px 20px #999;
    /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999;
    /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px;
    /* Firefox */
    -webkit-border-radius: 3px;
    /* Safari, Chrome */
}
img.btn_close {
    float: right;
    margin: -28px -28px 0 0;
}
</style>
</head>
<body>
<div class="btn-sign">
     <h2><a href="#login-box" class="login-window">Click me to Open the dialog box</a></h2>
</div>
<div id="login-box" class="login-popup"> <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
     <h1>This is a dialog box !</h1> 
    <p>How to load it on page load event?</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：