제이쿼리 불투명 배경 레이어 띄우기

길라잡이 0 59 2019.10.30 23:13

<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8"/>

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>okkks.tistory.com</title>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<style>

.opacity_bg_layer {display:none;position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50); z-index:10;}

.layer_pop_center {position:fixed;background:yellowgreen;padding: 10px;z-index:11;}

</style>

<script type="text/javascript">

/* 불투명 배경 레이어 뛰우기 */

function opacity_bg_layer() {

  if(!$('.opacity_bg_layer').length) {

    $('<div class="opacity_bg_layer"></div>').appendTo($('body'));

  }

 

  var oj = $(".opacity_bg_layer");

 

  // 화면의 가로, 세로 알아내기

  var w = $(document).width();

  var h = $(document).height();

 

  oj.css({'width':w,'height':h}); // 불투명 배경 레이어 크기 설정

  oj.fadeIn(500); // 불투명 배경 레이어 보이기 속도

}

 

 

 

/* 레이어 생성

cls : class

cont : 내용

기본 : 숨기기

*/

function layer_pop_crt(cls, cont) {

  if(!cls) return false;

  if(!$(cls).length) {

    $('<div class="' + cls + '">' + cont + '</div>').appendTo($('body'));

  }

 

  return true;

}

 

 

 

/* 레이어 띄우기

oj : 레이어 객체

*/

function layer_pop_center(oj) {

  if(!oj.length) return false;

  oj.layer_pop_center_set();

}

 

 

 

/* 레이어 팝업 위치 설정 */

$.fn.layer_pop_center_set = function () {

    //this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");

    //this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");

 

    this.css("top", ($(window).height() - $(this).outerHeight())/2);

   this.css("left", ($(window).width() - $(this).outerWidth())/2);

    return this;

}

 

 

 

/* 레이어 닫기 후 삭제

oj : 레이어 객체

*/

function layer_pop_close(oj) {

  if(oj.length) {

    oj.fadeOut(500, function() {

      oj.remove();

    });

  }

 

  // 불투명 배경 레이어 삭제

  var oj = $('.opacity_bg_layer');

  if(oj.length) {

    oj.fadeOut(500, function() {

     oj.remove();

    });

  }

}

 

 

 

/* 화면을 불러온 후 처리 */

$(document).ready(function() {

  var ly = 'layer_pop_center';

  var _ly;

  var ly_bg = $('.opacity_bg_layer');

 

  $(document).on('click', '.layer_pop_center_show', function() { // 레이어 팝업 띄우기

    if(!ly_bg.length) opacity_bg_layer(); // 불투명 배경 레이어 띄우기

    var str_html = "okkks.tistory.com"; // 레이어 팝업 내용

    if(layer_pop_crt(ly, str_html)) {

      _ly = $('.' + ly); // 레이어 팝업 생성 후 재 선언

      layer_pop_center(_ly);

      _ly.fadeIn(500);

    } else {

      if(ly_bg.length) ly_bg.remove();

    }

  }).on('click', '.opacity_bg_layer', function() { // 불투명 배경 레이어를 클릭하면 닫기

    layer_pop_close(_ly);

  }).on('click', '.layer_pop_center', function(e) { // 레이어 팝업 닫기

    if(_ly.length) layer_pop_close(_ly);

  });

});

 

 

 

// 브라우저 창 크기 변경에 따른 처리

$(window).resize(function() {

  var oj = $('.layer_pop_center');

  if(oj.length) layer_pop_center(oj); // 레이어 팝업이 실행된 상태에서만 진행

  if($('.opacity_bg_layer').length) opacity_bg_layer(); // 불투명 배경 레이어가 실행된 상태에서만 진행

});

</script>

</head>

<body>

 <div><a href="#" class="layer_pop_center_show">팝업 창 띄우기</a></div>

</body>

</html>​ 

Comments

번호 제목 글쓴이 날짜 조회
187 파이썬 MySql 쿼리 길라잡이 07.06 2
186 PHP 랜덤 문자열 생성 길라잡이 06.14 8
185 PHP 도메인명으로 아이피 확인하기 gethostbyname 길라잡이 06.13 4
184 파이썬 mysql 사용법 예제 pymysql 설치 길라잡이 06.13 7
183 MySQL 원격 접속 허용 길라잡이 06.13 9
182 IDLE 파이썬 쉘 길라잡이 06.13 9
181 파이썬 버전 확인 길라잡이 06.13 7
180 파이썬 DB연동 - PyMySQL + MySQL 길라잡이 06.13 6
179 php에서 쉘 명령어 실행 길라잡이 06.11 7
178 윈도우10 삭제가 안되는 폴더 파일 삭제하는 법 길라잡이 06.08 7
177 워드프레스 첫 번째 이미지를 자동으로 특성 이미지로 설정하는 방법 길라잡이 06.08 4
176 리눅스 CentOS 7 좀비 프로세스 생성, 찾기, 종료 길라잡이 06.04 10
175 MariaDB innodb_buffer_pool_size 최적화 항목들 길라잡이 06.01 15
174 리눅스 정보 조회 OS, CPU, RAM 길라잡이 06.01 15
173 MariaDB timeout 설정 길라잡이 06.01 17
172 데이터베이스 timeout 설정하기 길라잡이 06.01 11
171 MariaDB(MYSQL) 최적화 하기 – my.cnf(InnoDB) 설정 길라잡이 05.31 8
170 MariaDB Binlog Cache and Binlog Cache Size 길라잡이 05.31 8
169 apache error log 안쌓이게 하는 방법 길라잡이 05.31 13
168 파이썬으로 크롤링하는데 값이 안 읽어와질때 해결법 길라잡이 05.31 15
167 MariaDB max_heap_table_size 길라잡이 05.31 9
166 MariaDB tmp full 발생 시 조치방법 길라잡이 05.30 14
165 파이썬 MarkDown 사용법 총정리 길라잡이 05.30 16
164 파이썬 마크다운을 이용한 주피터 노트북 정리하는 방법 길라잡이 05.30 18
163 파이썬 input 함수 사용법 정리 파이썬 키보드 입력 길라잡이 05.30 14
162 파이썬 파일 사용법 정리 파일 읽기, 파일 쓰기, with문, pickle 모듈 길라잡이 05.30 9
161 파이썬 메모장에 글쓰기 길라잡이 05.30 14
160 파이썬 REQUESTS 모듈을 통한 자동화 글쓰기 길라잡이 05.30 9
159 파이썬 selenium chromedriver 버전 오류 해결하기 길라잡이 05.29 12
158 MARIADB OPEN_FILES_LIMIT 값 변경하기 길라잡이 05.29 11


 

페이스북에 공유 트위터에 공유 구글플러스에 공유 카카오스토리에 공유 네이버밴드에 공유