글 수 34
보짱일반적으로 플러그인으로 나와 있는 라이트박스를 많이 사용합니다.
플러그인을 가져다 붙이기에는 좀 거시기할 때, 간단하게 사용할 수 있는 심플한 modal window 코드를 소개합니다.
- HTML
<p><a class='activate_modal' name='first_window' href='#'>First modal window.</a></p> <p><a class='activate_modal' name='second_window' href='#'>Second modal window.</a></p> <div id='mask' class='close_modal'></div> <div id='first_window' class='modal_window'>This is the first modal window</div> <div id='second_window' class='modal_window'>Welcome to the second modal window</div>
- CSS
#mask{
position:absolute; /* important */
top:0px; /* start from top */
left:0px; /* start from left */
height:100%; /* cover the whole page */
width:100%; /* cover the whole page */
display:none; /* don't show it '*/
/* styling bellow */
background-color: black;
}
.modal_window{
position:absolute; /* important so we can position it on center later */
display:none; /* don't show it */
/* styling bellow */
color:white;
}
/* style a specific modal window */
#modal_window{
padding:50px;
border:1px solid gray;
background: #246493;
color:black;
}
- jQuery
$(document).ready(function(){
//get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();
//vertical and horizontal centering of modal window(s)
/*we will use each function so if we have more then 1
modal window we center them all*/
$('.modal_window').each(function(){
//get the height and width of the modal
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();
//calculate top and left offset needed for centering
var top = (window_height-modal_height)/2;
var left = (window_width-modal_width)/2;
//apply new top and left css values
$(this).css({'top' : top , 'left' : left});
});
$('.activate_modal').click(function(){
//get the id of the modal window stored in the name of the activating element
var modal_id = $(this).attr('name');
//use the function to show it
show_modal(modal_id);
});
$('.close_modal').click(function(){
//use the function to close it
close_modal();
});
});
//THE FUNCTIONS
function close_modal(){
//hide the mask
$('#mask').fadeOut(500);
//hide modal window(s)
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
//set display to block and opacity to 0 so we can use fadeTo
$('#mask').css({ 'display' : 'block', opacity : 0});
//fade in the mask to opacity 0.8
$('#mask').fadeTo(500,0.8);
//show the modal window
$('#'+modal_id).fadeIn(500);
}
원문 및 출처 : http://tutsvalley.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/
소속 : 밀짚모자 해적단
