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

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

기술자료

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

페이지 정보

댓글 0건 조회 607회 작성일 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,302건 1 페이지
기술자료 목록
번호 제목
공지 일반   16649  2001-08-31 11:52 ~ 2017-12-05 16:33  
2301 그누보드   20  2018-12-18 15:16  
2300 그누보드   19  2018-12-16 23:11 ~ 2018-12-17 07:01  
2299 PHP   51  2018-12-12 03:04 ~ 2018-12-14 20:04  
2298 MySQL   53  2018-12-11 14:36 ~ 2018-12-11 14:52  
2297 그누보드   49  2018-12-09 12:19  
2296 테크노트   78  2018-12-05 19:37 ~ 2018-12-06 15:43  
2295 킴스큐   76  2018-12-04 13:47  
2294 PHP   82  2018-12-03 17:34 ~ 2018-12-03 19:03  
2293 영카트   216  2018-11-28 10:37 ~ 2018-11-30 02:33  
2292 그누보드   127  2018-11-22 12:13  
2291 MySQL   196  2018-11-22 05:24 ~ 2018-11-22 05:27  
2290 HTML   165  2018-11-16 12:11 ~ 2018-11-16 12:17  
2289 Linux   161  2018-11-13 00:15 ~ 2018-11-15 05:37  
2288 그누보드   259  2018-11-09 06:32 ~ 2018-11-17 13:46  
2287 그누보드   273  2018-11-01 18:50 ~ 2018-11-01 19:01  
2286 영카트   237  2018-10-31 05:44 ~ 2018-10-31 05:47  
2285 그누보드   211  2018-10-30 15:47  
2284 그누보드   261  2018-10-22 09:58  
2283 HTML   333  2018-10-14 01:19 ~ 2018-10-14 02:09  
게시물 검색

회원로그인

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

접속자집계

오늘
2,035
어제
3,044
최대
3,306
전체
4,475,743

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