각각클릭시 중앙에 내용이 다른 DIV 보이기 채택완료
케빈박
7년 전
조회 4,077
아래 소스는 클릭하는곳이 하나인데 클릭을 여러군데서 하며 각각 다른내용의 div를 보여지게 하고 싶어요. 도와주세요~~
</p>
<p><script src="jquery-1.7.2.min.js"></script>
<style>
.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:555;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer .pop-layer {display:block;}</p>
<p>.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 430px; height:auto; background-color:#f7f7f7; z-index: 10;}
.pop-layer .pop-container {padding: 20px 25px 40px; overflow:hidden;}
.pop-layer p.ctxt {color: #666; line-height:25px; text-align:center;}
.pop-layer p.ctxt img{max-width:139px;}
.pop-layer .login-input{background-color:#fff; border:1px solid #ddd; width:100%; padding:10px; box-sizing:border-box; margin:4px 0px}
.pop-layer .login-input[type="password"]{font-family:'dotum'}
.pop-layer .btn-r {text-align:right;}
</style></p>
<p>
</head>
<body>
<!-- 레이어 팝업 -->
<div class="layer">
<div class="bg"></div>
<div id="layer2" class="pop-layer">
<div class="pop-container">
<div class="pop-conts">
<div class="btn-r">
<a href="#" class="cbtn">닫기</a>
</div>
내용 들어갑니다
</div>
</div>
</div>
</div>
<!-- 레이어 팝업 end --></p>
<p><a href="#" onClick="layer_open('layer2');return false;">창 띄우기 버튼</a></p>
<p></body>
</html></p>
<p> </p>
<p><script type="text/javascript"></p>
<p> </p>
<p>function layer_open(el){
var temp = $('#' + el);
var bg = temp.prev().hasClass('bg'); //dimmed 레이어를 감지하기 위한 boolean 변수
if(bg){
$('.layer').fadeIn(); //'bg' 클래스가 존재하면 레이어가 나타나고 배경은 dimmed 된다.
}else{
temp.fadeIn();
}</p>
<p> // 화면의 중앙에 레이어를 띄운다.
if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
else temp.css('top', '0px');
if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
else temp.css('left', '0px');</p>
<p> temp.find('a.cbtn').click(function(e){
if(bg){
$('.layer').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다.
}else{
temp.fadeOut();
}
e.preventDefault();
});</p>
<p> $('.layer .bg').click(function(e){ //배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러
$('.layer').fadeOut();
e.preventDefault();
});</p>
<p> } </p>
<p> </p>
<p></script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
7년 전
버튼과 레이어를 여러개 만드시고 각각 순서대로 layer-2 ~ layer 10 까지 붙였다고 치면
각 버튼에 <a href="#" onClick="layer_open('layer2');return false;">창 띄우기 버튼</a> 이 소스를 복사해붙여넣고 layer2 대신 열어야 할 레이어 이름을 불러주시면 될 것같아요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
민쯩먼저깔게요
7년 전
답변이 어떻게 해야 하는건지 이해가 안되는데 예시좀 해주시면 안될까요?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인