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

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

기술자료

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

페이지 정보

댓글 0건 조회 291회 작성일 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,284건 1 페이지
기술자료 목록
번호 제목
공지 일반   16359  2001-08-31 11:52 ~ 2017-12-05 16:33  
2283 HTML   21  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   56  2018-10-04 23:04  
2281 MySQL   67  2018-10-03 02:29  
2280 MySQL   85  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   110  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   118  2018-09-27 23:56  
2277 그누보드   101  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   137  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   128  2018-09-21 19:28  
2274 그누보드   165  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   224  2018-09-14 05:59  
2272 전자결제   170  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   172  2018-09-12 14:17 ~ 2018-09-13 14:38  
2270 일반   315  2018-08-31 18:10 ~ 2018-09-14 20:50  
2269 HTML   249  2018-08-30 15:47  
2268 그누보드   252  2018-08-30 10:41 ~ 2018-08-30 10:48  
2267 PHP   231  2018-08-29 03:21 ~ 2018-08-29 17:13  
열람중 JavaScript   292  2018-08-28 18:49  
2265 HTML   284  2018-08-27 14:33  
게시물 검색

회원로그인

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

접속자집계

오늘
252
어제
2,925
최대
3,174
전체
4,316,491

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