브라우저 중앙에 띄우는 모달 팝업 (레이어 윈도우) > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

JavaScript 브라우저 중앙에 띄우는 모달 팝업 (레이어 윈도우)

페이지 정보

댓글 0건 조회 200회 작성일 2018-08-28 18:49

본문

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>needPopup demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/needpopup.min.css">

<!-- Styles just for demo -->
<style>
    body {
        font: 14px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
        margin:0;
        padding:0;
        background: #FFE;
    }

    .wrapper {
        padding: 40px 60px;
    }

    a[data-needpopup-show] {
        display: inline-block;
        margin: 0 10px 10px 0;
        padding: 10px 15px;
        font-weight: bold;
        letter-spacing: 1px;
        text-decoration: none;
        color: #fff;
        background: #7B5207;
      border-radius: 3px;
      box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

    p {
        font-size: 1.2em;
        line-height: 1.4;
        color: #343638;
        margin: 20px 0;
    }

    .needpopup {
      border-radius: 6px;
      box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 1);
    }

    .needpopup p {
        margin: 0;
    }
    .needpopup p + p {
        margin-top: 10px;
    }
</style>
</head>

<body>
<div class="wrapper">
    <a href="#" data-needpopup-show="#small-popup">Show small popup</a>
    <a href="#" data-needpopup-show="#big-popup">Show big popup</a>
    <a href="#" data-needpopup-show="#custom-popup">Show custom options popup</a>


    <div id='small-popup' class="needpopup">
        <a href="#" data-needpopup-show="#big-popup">Go to big popup</a>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div id='custom-popup' class="needpopup" data-needpopup-options="custom">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div id='big-popup' class="needpopup">
        <a href="#" data-needpopup-show="#small-popup">Go to small popup</a>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../dist/needpopup.min.js"></script>
<script>  
    needPopup.config.custom = {
        'removerPlace': 'outside',
        'closeOnOutside': false,
        onShow: function() {
            console.log('needPopup is shown');
        },
        onHide: function() {
            console.log('needPopup is hidden');
        }
    };
    needPopup.init();
</script>
</body>
</html>



자료출처
http://www.blueb.co.kr/?c=1/15&cat=레이어윈도우&uid=3961
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

첨부파일

댓글목록

등록된 댓글이 없습니다.


Total 2,277건 1 페이지
기술자료 목록
번호 제목
공지 일반   16273  2001-08-31 11:52 ~ 2017-12-05 16:33  
2276 그누보드   10  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   11  2018-09-21 19:28  
2274 그누보드   57  2018-09-15 08:08  
2273 PHP   76  2018-09-14 05:59  
2272 전자결제   58  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   84  2018-09-12 14:17 ~ 2018-09-13 14:38  
2270 일반   169  2018-08-31 18:10 ~ 2018-09-14 20:50  
2269 HTML   155  2018-08-30 15:47  
2268 그누보드   173  2018-08-30 10:41 ~ 2018-08-30 10:48  
2267 PHP   147  2018-08-29 03:21 ~ 2018-08-29 17:13  
열람중 JavaScript   201  2018-08-28 18:49  
2265 HTML   197  2018-08-27 14:33  
2264 HTML   254  2018-08-26 14:07  
2263 일반   160  2018-08-22 13:17  
2262 PHP   164  2018-08-20 15:51  
2261 HTML   171  2018-08-18 05:37  
2260 일반   180  2018-08-17 15:18 ~ 2018-08-17 15:19  
2259 HTML   280  2018-08-17 06:39  
2258 HTML   248  2018-08-15 05:06 ~ 2018-08-15 05:58  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
1,242
어제
2,261
최대
3,174
전체
4,269,249

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.