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

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

본문 바로가기

사이트 내 전체검색

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

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

페이지 정보


첨부파일

본문

샘플 : https://www.happyjung.com/demo/js/needpopup.html

needpopup.css
needpopup.html
needpopup.js
needpopup.min.css
needpopup.min.js


<!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,634건 19 페이지
  • RSS
기술자료 목록
2274
MySQL   7523  2018-10-02 22:55 ~ 2018-10-02 22:58  
2273
PHP   10796  2018-09-30 15:07 ~ 2018-09-30 15:53  
2272
그누보드   9626  2018-09-27 23:56 ~ 2022-10-22 17:56  
2271
그누보드   8288  2018-09-27 22:01 ~ 2018-09-27 22:40  
2270
그누보드   12284  2018-09-22 01:04 ~ 2023-04-13 16:11  
2269
그누보드   8056  2018-09-21 19:28  
2268
그누보드   9496  2018-09-15 08:08 ~ 2022-04-21 03:02  
2267
전자결제   19464  2018-09-14 05:59 ~ 2020-09-08 23:29  
2266
전자결제   8705  2018-09-14 04:57 ~ 2018-09-14 04:58  
2265
전자결제   9125  2018-09-12 14:17 ~ 2019-03-21 17:04  
2264
일반   11771  2018-08-31 18:10 ~ 2018-09-14 20:50  
2263
HTML   7782  2018-08-30 15:47 ~ 2022-02-08 12:07  
2262
그누보드   7944  2018-08-30 10:41 ~ 2018-08-30 10:48  
2261
PHP   6589  2018-08-29 03:21 ~ 2018-08-29 17:13  
열람
JavaScript   11405  2018-08-28 18:49 ~ 2022-06-13 22:38  
2259
HTML   11070  2018-08-27 14:33 ~ 2021-07-25 18:16  
2258
HTML   13800  2018-08-26 14:07  
2257
일반   8309  2018-08-22 13:17  
2256
PHP   9115  2018-08-20 15:51  
2255
HTML   8845  2018-08-18 05:37  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.