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

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

기술자료

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

페이지 정보

댓글 0건 조회 452회 작성일 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,290건 1 페이지
기술자료 목록
번호 제목
공지 일반   16497  2001-08-31 11:52 ~ 2017-12-05 16:33  
2289 Linux   27  2018-11-13 00:15 ~ 2018-11-15 05:37  
2288 그누보드   67  2018-11-09 06:32 ~ 2018-11-12 05:09  
2287 그누보드   81  2018-11-01 18:50 ~ 2018-11-01 19:01  
2286 영카트   75  2018-10-31 05:44 ~ 2018-10-31 05:47  
2285 그누보드   76  2018-10-30 15:47  
2284 그누보드   122  2018-10-22 09:58  
2283 HTML   172  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   197  2018-10-04 23:04  
2281 MySQL   207  2018-10-03 02:29  
2280 MySQL   268  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   255  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   264  2018-09-27 23:56  
2277 그누보드   229  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   285  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   240  2018-09-21 19:28  
2274 그누보드   280  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   402  2018-09-14 05:59  
2272 전자결제   277  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   281  2018-09-12 14:17 ~ 2018-09-13 14:38  
게시물 검색

회원로그인

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

접속자집계

오늘
2,261
어제
2,776
최대
3,174
전체
4,389,350

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