Modal打開載入頁面

Question

我有這段代碼爲模態，但只有當爲此模態分配的按鈕被點擊時纔會出現。

我希望我的模態可以隨頁面一起自動加載，而無需點擊任何按鈕。

我該怎麼做？

jQuery(document).ready(function() { 

//select all the a tag with name equal to modal 
jQuery('a[name=account]').click(function(e) { 
    //Cancel the link behavior 
    e.preventDefault(); 

    //Get the A tag 
    var id = jQuery(this).attr('href'); 

    //Get the screen height and width 
    var maskHeight = jQuery(document).height(); 
    var maskWidth = jQuery(window).width(); 

    //Set heigth and width to mask to fill up the whole screen 
    jQuery('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //transition effect  
    jQuery('#mask').fadeIn(400);  
    jQuery('#mask').fadeTo(400,0.8);  

    //Get the window height and width 
    var winH = jQuery(window).height(); 
    var winW = jQuery(window).width(); 

    //Set the popup window to center 
    jQuery(id).css('top', winH/2-jQuery(id).height()/2); 
    jQuery(id).css('left', winW/2-jQuery(id).width()/2); 

    //transition effect 
    jQuery(id).fadeIn(400); 

}); 

//if close button is clicked 
jQuery('.window .close').click(function (e) { 
    //Cancel the link behavior 
    e.preventDefault(); 

    jQuery('#mask').hide(); 
    jQuery('.window').hide(); 
});  


jQuery(window).resize(function() { 

    var box = jQuery('#boxes .window'); 

    //Get the screen height and width 
    var maskHeight = jQuery(document).height(); 
    var maskWidth = jQuery(window).width(); 

    //Set height and width to mask to fill up the whole screen 
    jQuery('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //Get the window height and width 
    var winH = jQuery(window).height(); 
    var winW = jQuery(window).width(); 

    //Set the popup window to center 
    box.css('top', winH/2 - box.height()/2); 
    box.css('left', winW/2 - box.width()/2); 

}); 
}); 

Answer 1

只彈出像這樣

function pop(id) { 

    //Get the screen height and width 
    var maskHeight = jQuery(document).height(); 
    var maskWidth = jQuery(window).width(); 

    //Set heigth and width to mask to fill up the whole screen 
    jQuery('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //transition effect  
    jQuery('#mask').fadeIn(400);  
    jQuery('#mask').fadeTo(400,0.8);  

    //Get the window height and width 
    var winH = jQuery(window).height(); 
    var winW = jQuery(window).width(); 

    //Set the popup window to center 
    jQuery(id).css('top', winH/2-jQuery(id).height()/2); 
    jQuery(id).css('left', winW/2-jQuery(id).width()/2); 

    //transition effect 
    jQuery(id).fadeIn(400); 

} 

jQuery(document).ready(function() { 
    pop("some ID"); 
    //select all the a tag with name equal to modal 
    jQuery('a[name=account]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     //Get the A tag 
     var id = jQuery(this).attr('href'); 
     pop(id); 

    }); 
. 
. 
. 

Answer 2

您可以將jQuery('a[name=account]').trigger('click')放在您的.ready函數處理函數的末尾。但請注意，如'a[name=account]'這樣的選擇器會在所有<a name="account"上觸發點擊，這可能會導致出現多個模式窗口。或彈出最後的a會出現。也許你需要設置一些<a>的ID，以調用該<a>

jQuery(document).ready(function() { 

//select all the a tag with name equal to modal 
jQuery('a[name=account]').click(function(e) { 
    ....  
}); 

//if close button is clicked 
jQuery('.window .close').click(function (e) { 
    ..... 
});  


jQuery(window).resize(function() { 

    .... 

}); 
jQuery('a[name=account]').trigger('click'); 
});