Simple Slider

간단한 Modal 팝업 구현하기

			/* layerPopup open/close  */
			;(function ($) {
				$.fn.extend({
					openLayerPop : function (targetLayer) {
						return this.each(function () {
							$(this).click(function (e) {
								e.preventDefault();
								
								// 마스크
								$maskLayer = $('<div id="mask"></div>');
								$targetLayer = $(targetLayer);

								var maskHeight = $(document).height();
								var maskWidth = $(window).width();
								var layerHeight = $targetLayer.height();	
								var layerWidth = $targetLayer.width();	

								$targetLayer.before($maskLayer);
								$maskLayer.css({
									'width':maskWidth,
									'height':maskHeight,
									position : "absolute",
									top : 0,
									left : 0,
									zIndex:2000,
									backgroundColor:"#000",
									display:"none"
								});

								$maskLayer.fadeTo("slow", 0.5);

								$targetLayer.css({
									position:"absolute",
									left:'50%',
									top:'50%',
									zIndex:3000,
									marginTop: -layerHeight/2,
									marginLeft: -layerWidth/2
								});
								$targetLayer.fadeIn(700);

							});
						});
					},	// end of openLayerPop

					closeLayerPop : function (targetLayer) {
						return this.each(function () {
							$(this).click(function (e) {
								e.preventDefault();
								$maskLayer = $('#mask');
								$targetLayer = $(targetLayer);

								// mask layer 숨기고 지우기
								$maskLayer.hide();
								$maskLayer.remove();
								$targetLayer.hide();
							});
						});
					}	// end of closeLayerPop
				});
			})(jQuery);

			$(function(){
				$('#sampleLayerPop').hide();
				$('#btnOpenLayer').openLayerPop('#sampleLayerPop');
				$('#btnClose').closeLayerPop('#sampleLayerPop');
			});					
						
			$(function(){
				$('#sampleLayerPop').hide();
				$('#btnOpenLayer').openLayerPop('#sampleLayerPop');
				$('#btnClose').closeLayerPop('#sampleLayerPop');
			});					
						
		<div id="sampleLayerPop" class="sample_modal">
			<h2>모달 팝업 샘플</h2>
			<p>
				모달<br />
				모달<br />
				모달<br />
				모달<br />
				모달<br />
			</p>
			<a href="#" id="btnClose" class="btn_close">X</a>
		</div>
						

모달 팝업 샘플

모달
모달
모달
모달
모달

X