레이어팝업 한화면에서 여러개사용 채택완료

</p><p><style type="text/css"></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>.layer .pop-layer {display:block;}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">	</span>.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 410px; height:auto;  background-color:#fff; border: 5px solid #3571B5; z-index: 10;}<span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>.pop-layer .pop-container {padding: 20px 25px;}</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>.pop-layer p.ctxt {color: #666; line-height: 25px;}</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>.pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; border-top: 1px solid #DDD; text-align:right;}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">	</span>a.cbtn {display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:#3f5a9d; font-size:13px; color:#fff; line-height:25px;}<span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}</p><p></style></p><p> </p><p> </p><p><script src="<a href="<a href="http://code.jquery.com/jquery-latest.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js</a>"><a href="http://code.jquery.com/jquery-latest.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js</a></a>"</p><p>        type="text/javascript"></script></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><a href="#" class="btn-example" onclick="layer_open('layer2');return false;">예제-2 보기</a></p><p><div class="layer"></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="bg"></div></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div id="layer2" class="pop-layer"></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><div class="pop-container"></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><div class="pop-conts"></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><!--content //--></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><p class="ctxt mb20">Thank you.
</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>Your registration was submitted successfully.
</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>Selected invitees will be notified by e-mail on JANUARY 24th.

</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>Hope to see you soon!</p><p><span class="Apple-tab-span" style="white-space:pre">				</span></p></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">				</span><div class="btn-r"></p><p><span class="Apple-tab-span" style="white-space:pre">					</span><a href="#" class="cbtn">Close</a></p><p><span class="Apple-tab-span" style="white-space:pre">				</span></div></p><p><span class="Apple-tab-span" style="white-space:pre">				</span><!--// content--></p><p><span class="Apple-tab-span" style="white-space:pre">			</span></div></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></div></p><p><span class="Apple-tab-span" style="white-space:pre">	</span></div></p><p></div></p><p> </p><p> </p><p> </p><p> </p><p><script type="text/javascript"></p><p><span class="Apple-tab-span" style="white-space:pre">	</span>function layer_open(el){</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">		</span>var temp = $('#' + el);</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>var bg = temp.prev().hasClass('bg');<span class="Apple-tab-span" style="white-space:pre">	</span>//dimmed 레이어를 감지하기 위한 boolean 변수</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if(bg){</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>$('.layer').fadeIn();<span class="Apple-tab-span" style="white-space:pre">	</span>//'bg' 클래스가 존재하면 레이어가 나타나고 배경은 dimmed 된다. </p><p><span class="Apple-tab-span" style="white-space:pre">		</span>}else{</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>temp.fadeIn();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">		</span>// 화면의 중앙에 레이어를 띄운다.</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>else temp.css('top', '0px');</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>else temp.css('left', '0px');</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">		</span>temp.find('a.cbtn').click(function(e){</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>if(bg){</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>$('.layer').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다. </p><p><span class="Apple-tab-span" style="white-space:pre">			</span>}else{</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>temp.fadeOut();</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>e.preventDefault();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>});</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$('.layer .bg').click(function(e){<span class="Apple-tab-span" style="white-space:pre">	</span>//배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>$('.layer').fadeOut();</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>e.preventDefault();</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>});</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">	</span>}<span class="Apple-tab-span" style="white-space:pre">				</span></p><p></script></p><p> </p><p> </p><p> </p><p>