Jquery 모달 상자가 페이지로드에 나타납니다.

Question

이 Jquery 상자를 페이지로드에 표시해야합니다. 지금은 사용자가 링크를 클릭 할 때만 나타납니다.

<script type="text/javascript"> 

$(document).ready(function() { 

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

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

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

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

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

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

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

     //transition effect 
     $(id).fadeIn(2000); 

    }); 

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

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

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });   

}); 

</script> 

임은 물론, 여기에 어떤 아이디어 솔루션의 일종이 있어야합니다 : 여기

트리거입니까?

Answer 1

당신은 initialModalLink 모달 창을 실행해야 링크의 ID입니다 필요한 링크

$(window).load(function() { 
    $('a#initialModalLink[name=modal]').trigger("click"); 
}); 

에 이벤트를 클릭하여 발사 할 수 있습니다. 또한 (그리고 더 나은 것) 별도의 기능에 모달 창 열기를 추출하고 그것을 사용할 수 있습니다

function openModal(id) { 

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

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

    //transition effect 
    $('#mask').fadeIn(1000); 
    $('#mask').fadeTo("slow", 0.8); 

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

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

    //transition effect 
    $(id).fadeIn(2000); 

} 

$(document).ready(function() { 

    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 
     openModal($(this).attr('href')); 
    }); 

    openModal('the href of initial modal box'); 

}); 

Answer 2

물론, 당신은 보낼 것을 href가 알 필요가있다. 이 같은 모달 기능을 추출하고 필요할 때 호출 할 수 있습니다 :

var modal = function(id) { 

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

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

    //transition effect  
    $('#mask').fadeIn(1000);  
    $('#mask').fadeTo("slow",0.8); 

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

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

    //transition effect 
    $(id).fadeIn(2000); 

}); 

$(document).ready(function() { 
    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     e.preventDefault(); 
     modal($(this).attr('href')); // this might be a typo, should be id? 
    }); 
    // fire the modal on load 
    modal('http://display.me/in/modal/'); 
}); 

Answer 3

코드가 가까운 기능을 실행 :이 정말 잘 작동

function openModal(id) { 

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

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

    //transition effect 
    $('#mask').fadeIn(1000); 
    $('#mask').fadeTo("slow", 0.8); 

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

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

    //transition effect 
    $(id).fadeIn(2000); 

    $('.window .modalClose').click(function (e) { 
     e.preventDefault(); 

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

    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });   

} 

$(document).ready(function() { 

    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 
     openModal($(this).attr('href')); 
    }); 

    openModal('#modalDialog'); 

});