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

Modal打开onload页面

2 个答案: