jquery popup layer
첨부파일 https://eond.com/jquery/395403
<a href="#layer1" class="btn-example">일반 팝업레이어</a>

위와 같은 형식으로 사용 가능합니다.

클래스 속성에 btn-popup 혹은 btn-example 이라는 클래스명을 작성한 뒤,

#layer1 이라는 아이디명을 적어서 사용합니다. 클릭하면 해당 레이어가 보여지는 방식입니다.


preview

https://codepen.io/jaehee/pen/xwRNdQ

html

<div style="height: 300px;"></div>
<a href="#layer1" class="btn-example">일반 팝업레이어</a>
<div id="layer1" class="pop-layer">
    <div class="pop-container">
        <div class="pop-conts">
            <!--content //-->
            <p class="ctxt mb20">Thank you.<br>
                Your registration was submitted successfully.<br>
                Selected invitees will be notified by e-mail on JANUARY 24th.<br><br>
                Hope to see you soon!
            </p>

            <div class="btn-r">
                <a href="#" class="btn-layerClose">Close</a>
            </div>
            <!--// content-->
        </div>
    </div>
</div>
<br/><br/>
<a href="#layer2" class="btn-example">딤처리 팝업레이어 1</a>
<div class="dim-layer">
    <div class="dimBg"></div>
    <div id="layer2" class="pop-layer">
        <div class="pop-container">
            <div class="pop-conts">
                <!--content //-->
                <p class="ctxt mb20">Thank you.<br>
                    Your registration was submitted successfully.<br>
                    Selected invitees will be notified by e-mail on JANUARY 24th.<br><br>
                    Hope to see you soon!
                </p>

                <div class="btn-r">
                    <a href="#" class="btn-layerClose">Close</a>
                </div>
                <!--// content-->
            </div>
        </div>
    </div>
</div>

css

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 100px;
}

.pop-layer .pop-container {
  padding: 20px 25px;
}

.pop-layer p.ctxt {
  color: #666;
  line-height: 25px;
}

.pop-layer .btn-r {
  width: 100%;
  margin: 10px 0 20px;
  padding-top: 10px;
  border-top: 1px solid #DDD;
  text-align: right;
}

.pop-layer {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 410px;
  height: auto;
  background-color: #fff;
  border: 5px solid #3571B5;
  z-index: 10;
}

.dim-layer {
  display: none;
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.dim-layer .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}

.dim-layer .pop-layer {
  display: block;
}

a.btn-layerClose {
  display: inline-block;
  height: 25px;
  padding: 0 14px 0;
  border: 1px solid #304a8a;
  background-color: #3f5a9d;
  font-size: 13px;
  color: #fff;
  line-height: 25px;
}

a.btn-layerClose:hover {
  border: 1px solid #091940;
  background-color: #1f326a;
  color: #fff;
}

js

$('.btn-example').click(function(){
        var $href = $(this).attr('href');
        layer_popup($href);
    });
    function layer_popup(el){

        var $el = $(el);        //레이어의 id를 $el 변수에 저장
        var isDim = $el.prev().hasClass('dimBg');   //dimmed 레이어를 감지하기 위한 boolean 변수

        isDim ? $('.dim-layer').fadeIn() : $el.fadeIn();

        var $elWidth = ~~($el.outerWidth()),
            $elHeight = ~~($el.outerHeight()),
            docWidth = $(document).width(),
            docHeight = $(document).height();

        // 화면의 중앙에 레이어를 띄운다.
        if ($elHeight < docHeight || $elWidth < docWidth) {
            $el.css({
                marginTop: -$elHeight /2,
                marginLeft: -$elWidth/2
            })
        } else {
            $el.css({top: 0, left: 0});
        }

        $el.find('a.btn-layerClose').click(function(){
            isDim ? $('.dim-layer').fadeOut() : $el.fadeOut(); // 닫기 버튼을 클릭하면 레이어가 닫힌다.
            return false;
        });

        $('.layer .dimBg').click(function(){
            $('.dim-layer').fadeOut();
            return false;
        });

    }


See the Pen layer-popup by jaeheekim (@jaehee) on CodePen.



코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 2 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
121 [슬라이더 플러그인] slick slider 사용방법 2018/08/15 0
120 [기초활용] [jQuery] each, loop, setInterval 활용 파일 2018/05/28 0
119 [팁] 자바스크립트 키코드, 키 이벤트 2018/05/27 0
118 [기초활용] 모달창 만들기 2017/12/21 0
117 [기초활용] Modal (모달창) 2018/05/27 0
116 [팁] [jQuery] 페이징 만들기 2015/08/31 0
115 [슬라이더 플러그인] 병풍 스크립트 2018/04/19 0
114 [슬라이더 플러그인] carousel slider 2018/04/17 0
113 [화면전환 스크롤] Delighters : CSS Animations on Page Scroll 2018/04/13 0
112 [기초활용] Add smooth scrolling to page anchors 2018/04/13 0
111 [기타 플러그인] macy.js (masonry 벽돌 레이아웃) 파일 2018/01/15 0
110 [슬라이더 플러그인] Camera Slider jquery 2015/11/15 0
현재글 [기초활용] jquery popup layer 2017/12/21 0
108 [기초활용] jquery 가나다 정렬 2017/12/20 0
107 [기초활용] [jquery] 폰트 사이즈 조절 버튼 페이지 이동시에 변수 초기화 문제 2017/12/20 0
106 [기초활용] 스크롤 내려오면 멈추는 스크립트 2017/11/16 0
105 $.browser.msie undefined 오류 2017/08/23 0
104 [화면전환 스크롤] 패럴렉스 스크롤링 플러그인 2017/03/31 0
103 [기초활용] 비밀글 jQuery style 찾기 2017/03/31 0

해시태그 디렉터리