jquery 레이어 띄우기

중앙에 띄우기

닫기

원하는 위치에 띄우기

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript"> function openLayer(targetID, options){ var $layer = $('#'+targetID); var $close = $layer.find('.close'); var width = $layer.outerWidth(); var ypos = options.top; var xpos = options.left; var marginLeft = 0; if(xpos==undefined){ xpos = '50%'; marginLeft = -(width/2); } if(!$layer.is(':visible')){ $layer.css({'top':ypos+'px','left':xpos,'margin-left':marginLeft}) .show(); } $close.bind('click',function(){ if($layer.is(':visible')){ $layer.hide(); } return false; }); } </script> <style type="text/css"> .layer-popup {display:none; position:absolute; left:50%; top:175px; z-index:10; padding:30px 30px 35px; margin-left:-235px; background-color:#fff; border:1px solid #000;} </style> <p class="ac mt30 mb30"><a class="cbtn" onclick="openLayer('car',{top:100});return false;" href="#">중앙에 띄우기</a></p> <div class="layer-popup" id="car"> <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a class="close" href="#">닫기</a></td> </tr> <tr> <td> <iframe src="http://www.kstravel.co.kr/muju/muju_res.asp" width=480 height=500 frameborder=0 scrolling=yes></iframe></td> </tr> </table> </div> <p class="ac mt30 mb30"><a class="cbtn" onclick="openLayer('poster',{top:1100, left:100});return false;" href="#">원하는 위치에 띄우기</a></p> <div class="layer-popup" id="poster"> <a class="close" href="#"><img width="250" height="356" alt="" src="http://mylko72.maru.net/jquerylab/images/poster.jpg"></a> </div>