Wie zu öffnen jquery dialog-box auf der Seite ein onload-Ereignis

Hier ist der vollständige code. Ich möchte, um dieses Dialogfeld zu öffnen, auf Seite load-Ereignis anstelle von klicken. Bitte unterstützen Sie mich auf diese.

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

Hier ist der vollständige code. Ich möchte, um dieses Dialogfeld zu öffnen, auf Seite load-Ereignis anstelle von klicken. Bitte unterstützen Sie mich auf diese.

InformationsquelleAutor Vikash Rathee | 2013-06-19

3

Entfernen Sie die $('a.login-window').click(function() { (und entsprechende }. So kann das DOM-ready nennen, wird es geöffnet. Sie müssen auch zu ändern var loginBox = $(this).attr('href'); zu var loginBox = $('.login-window').attr('href');. .live() war veraltet, zu Gunsten der .on() im jQuery-1.7. Und entfernen Sie die erste return false; dass Sie Abbrechen, wird das click-Ereignis. Natürlich, dies soll nur zeigen, den dialog laden und nicht onlick aber du hast gesagt "ich will, um dieses Dialogfeld zu öffnen, auf Seite load-Ereignis statt klicken", nicht "neben".

jsFiddle-Beispiel
```
//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;
});
```
- Funktioniert nicht. Können Sie bitte zeigen Sie mir demo auf jsfiddle oder sonst irgendwo..oder fügen Sie den kompletten code arbeiten
- Du hast Recht, es war ein wenig mehr zu ihm. Aktualisierung der Antwort.
- Nicht sicher, warum es ist nicht mit mir zu arbeiten. Aber wieder, es funktioniert nicht auf dem lokalen system.
- Funktioniert es in der Geige für Sie?
- Ja fiddle funktioniert. Aber local funktioniert nicht. Siehe unten Konzern-fiddle-code, was ich benutze, auf der lokalen.
- Ich fand das Problem. Es funktioniert jetzt..ich war fehlende jquery-1.9.1-Aufruf auf der Seite. Ich danke Ihnen sehr für Ihre Zeit und Auflösung.
InformationsquelleAutor j08691

Einfach zu entfernen die click-handler, der gewickelt um den Initialisierungs-code:

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

Auch, wie jQuery 1.9, dem live Funktion wurde entfernt, so dass Sie brauchen, um auf.

Hi cfs. Ich habe Ihre angegebenen code. Aber funktioniert nicht..Kannst du bitte nochmal schauen und probieren Sie es aus auf jsfiddle oder sonst irgendwo zu sehen..

InformationsquelleAutor cfs

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

InformationsquelleAutor Vikash Rathee

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.