그누보드 QA - 각각클릭시 중앙에 내용이 다른 DIV 보이기

각각클릭시 중앙에 내용이 다른 DIV 보이기

2018.02.21 09:49:56 조회 3702 (122.♡.♡.115)

본문

아래 소스는 클릭하는곳이 하나인데 클릭을 여러군데서 하며 각각 다른내용의 div를 보여지게 하고 싶어요. 도와주세요~~


<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;}
.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>

</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 -->
<a href="#" onClick="layer_open('layer2');return false;">창 띄우기 버튼</a>
</body>
</html>
 
<script type="text/javascript">
 
function layer_open(el){
        var temp = $('#' + el);
        var bg = temp.prev().hasClass('bg');    //dimmed 레이어를 감지하기 위한 boolean 변수
        if(bg){
            $('.layer').fadeIn();    //'bg' 클래스가 존재하면 레이어가 나타나고 배경은 dimmed 된다. 
        }else{
            temp.fadeIn();
        }
        // 화면의 중앙에 레이어를 띄운다.
        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');
        temp.find('a.cbtn').click(function(e){
            if(bg){
                $('.layer').fadeOut(); //'bg' 클래스가 존재하면 레이어를 사라지게 한다. 
            }else{
                temp.fadeOut();
            }
            e.preventDefault();
        });
        $('.layer .bg').click(function(e){    //배경을 클릭하면 레이어를 사라지게 하는 이벤트 핸들러
            $('.layer').fadeOut();
            e.preventDefault();
        });
    }            
 
</script>