2

これが完全なコードです。クリックではなく、ページ読み込みイベントでこのダイアログ ボックスを開きたいです。これについて私を助けてください。

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

これが完全なコードです。クリックではなく、ページ読み込みイベントでこのダイアログ ボックスを開きたいです。これについて私を助けてください。

4

3 に答える 3

3

$('a.login-window').click(function() {( および対応する. を削除すると}、DOM Ready 呼び出しでそれが開きます。また、 .はjQuery 1.7で廃止されたため、変更var loginBox = $(this).attr('href');する必要があります。そして、クリック イベントをキャンセルするために使用した最初のものを削除します。もちろん、これはonlickではなくロード時にのみダイアログを表示しますが、「クリックではなくページロードイベントでこのダイアログボックスを開きたい」と言いましたが、「に加えて」ではありません。var loginBox = $('.login-window').attr('href');.live().on()return false;

jsFiddle の例

// 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;
});
于 2013-06-19T19:20:47.233 に答える
1

初期化コードにラップされているクリック ハンドラーを削除するだけです。

$(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 では関数が削除されたため、 onliveを使用する必要があります。

于 2013-06-19T19:20:28.963 に答える