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

케빈박

2018-02-21 (수) 09:49:56 4,261

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

Copy

<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>

창띄우기 중앙div 중앙레이어 제이쿼리

답변 2개 / 댓글 1개

채택된 답변

+20 포인트

janedoe

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-02-25 (일) 00:57:13

버튼과 레이어를 여러개 만드시고 각각 순서대로 layer-2 ~ layer 10 까지 붙였다고 치면

각 버튼에 <a href="#" onClick="layer_open('layer2');return false;">창 띄우기 버튼</a> 이 소스를 복사해붙여넣고 layer2 대신 열어야 할 레이어 이름을 불러주시면 될 것같아요

답변에 대한 댓글 1개

민쯩먼저깔게요

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-04-30 (월) 00:49:20

답변이 어떻게 해야 하는건지 이해가 안되는데 예시좀 해주시면 안될까요?

민쯩먼저깔게요

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2018-04-30 (월) 00:48:42

질문자님 이거 해결하였으면 공유좀 부탁드릴게요

답변을 작성하려면 로그인이 필요합니다.

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

답변 2개 / 댓글 1개

답변에 대한 댓글 1개

공유하기