如何在页面onload事件上打开jquery对话框_Jquery_Html_Modal Dialog

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

jquery html

如何在页面onload事件上打开jquery对话框,jquery,html,modal-dialog,Jquery,Html,Modal Dialog,这是完整的代码。我想在页面加载事件上打开此对话框，而不是单击。请在这方面帮助我 <!DOCTYPE HTML> <html> <head> <style type="text/css"> a { text-decoration:none; color:#00c6ff; } h1 { font: 4em normal Arial, Helvetica, sans-serif; padding: 20px; ma

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

<!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{
文字装饰：无；
颜色：#00c6ff；
}
h1{
字体：4em普通Arial，Helvetica，无衬线；
填充：20px；边距：0；
文本对齐：居中；
}
氢{
颜色：#bbb；
字号：3em；
文本对齐：居中；
文本阴影：0 1px 3px#161616；
}
#面具{
显示：无；
背景：#000；
位置：固定；左侧：0；顶部：0；
z指数：10；
宽度：100%；高度：100%；
不透明度：0.8；
z指数：999；
}
.登录弹出窗口{
显示：无；
背景：#fff；
填充：10px；
边框：2px实心#ddd；
浮动：左；
字体大小：1.2米；
位置：固定；
顶部：50%；左侧：50%；
z指数：99999；
盒影：0px 0px 20px#999；
-moz盒阴影：0px 0px 20px#999；/*Firefox*/
-webkit盒影：0px 0px 20px#999；/*Safari，Chrome*/
边界半径：3px 3px 3px 3px；
-moz边框半径：3px；/*Firefox*/
-webkit边界半径：3px；/*Safari，镀铬*/
}
img.btn\u关闭{
浮动：对；
保证金：-28px-28px 0；
}
$（文档）.ready（函数（）{
$（'a.login-window'）。单击（函数（）{
//从链接获取变量的值
var loginBox=$（this.attr（'href'）；
//淡入弹出窗口并添加关闭按钮
$（登录框）.fadeIn（300）；
//设置中心对齐填充+边框
var popMargTop=（$（loginBox）.height（）+24）/2；
var popMargLeft=（$（loginBox）.width（）+24）/2；
$（登录框）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（'body'）。追加（''）；
$（'面具'）.fadeIn（300）；
返回false；
});
//单击“关闭”按钮或遮罩层时，弹出窗口关闭
$（'a.close，#mask'）.live（'click'，function（）{
$（'#掩码，.login popup'）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
}); 
返回false；
});
});
这是一个对话框！
如何在页面加载事件中加载它

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

只需删除环绕初始化代码的单击处理程序：

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

$(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();  
    }); 
});

$（文档）.ready（函数（）{
//从链接获取变量的值
var loginBox=$（this.attr（'href'）；
//淡入弹出窗口并添加关闭按钮
$（登录框）.fadeIn（300）；
//设置中心对齐填充+边框
var popMargTop=（$（loginBox）.height（）+24）/2；
var popMargLeft=（$（loginBox）.width（）+24）/2；
$（登录框）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（'body'）。追加（''）；
$（'面具'）.fadeIn（300）；
//单击“关闭”按钮或遮罩层时，弹出窗口关闭
$（'a.close，#mask'）。在（'click'，function（）{
$（'#掩码，.login popup'）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
}); 
});

另外，从jQuery 1.9开始，

live

函数已经被删除，因此您需要使用。

删除

$（'a.login-window'）。单击（function（）{

（以及相应的

）。这样，DOM就绪调用将打开它。您还需要将

var loginBox=$（this.attr（'href'）；

更改为

var loginBox=$（'.login window'）.attr（'href'）；

.live（）

被弃用，取而代之的是jQuery 1.7中的

.on（）

。并删除用于取消单击事件的第一个

返回false；

。当然，这只会在加载时显示对话框，而不是仅单击，而是您说的“我想在页面加载事件上打开此对话框，而不是单击”，而不是“除了”

// 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;
});

//从链接获取变量的值
var loginBox=$（'.login window'）.attr（'href'）；
//淡入弹出窗口并添加关闭按钮
$（登录框）.fadeIn（300）；
//设置中心对齐填充+边框
var popMargTop=（$（loginBox）.height（）+24）/2；
var popMargLeft=（$（loginBox）.width（）+24）/2；
$（loginBox）.css({
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（'body'）。追加（''）；
$（'面具'）.fadeIn（300）；
//单击“关闭”按钮或遮罩层时，弹出窗口关闭
$（'a.close，#mask'）。打开（'click'，函数（）{
$（'#掩码，.login popup'）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
});
返回false；
});


//从链接获取变量的值
var loginBox=$（'.login window'）.attr（'href'）；
//淡入弹出窗口并添加关闭按钮
$（登录框）.fadeIn（300）；
//设置中心对齐填充+边框
var popMargTop=（$（loginBox）.height（）+24）/2；
var popMargLeft=（$（loginBox）.width（）+24）/2；
$（loginBox）.css({
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（'body'）。追加（''）；
$（'面具'）.fadeIn（300）；
//单击“关闭”按钮或遮罩层时，弹出窗口关闭
$（'a.close，#mask'）。打开（'click'，函数（）{
$（'#掩码，.login popup'）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
});
返回false；
});
a{
文字装饰：无；
颜色：#00c6ff；
}
h1{
字体：4em普通Arial，Helvetica，无衬线；
填充：20px；
保证金：0；
文本对齐：居中；
}
氢{
颜色：#bbb；
字号：3em；
文本对齐：居中；
文本阴影：0 1px 3px#161616；
}
#面具{
显示：无；
背景：#000；
位置：固定；
左：0；
排名：0；
z指数：10；
宽度：100%；
身高：100%；
不透明度：0.8；
z指数：999；
}
.登录弹出窗口{
显示：无；
背景：#fff；
填充：10px；
边框：2px实心#ddd；
浮动：左；