JavaScript

# 전체내용 둘러보기(Overview) – Link

# Step1 – jQuery Blurbox 다운로드

jQuery Blurbox 공식 배포 Github(Link)에 가서 blurbox.js 파일을 다운로드 받는다.

# Step2 – 원하는 스타일에 맞추어 CSS나 옵션설정 커스터 마이징

해당 파일을 HTML코드내 JavaScript파일로 Import 처리한다. blurbox.js 파일을 단독으로 호출해도 되지만 다른 JavaScript 파일과 함께 사용하는 경우가 있다면 아래와 같이 HTML Document가 load되었을때 blurbox.js의 내용이 호출될수 있도록 변경도 가능한다.

$(document).ready(function() {
   // 아래 하단에 BlurBox.js의 전체를 복사 및 붙여넣기 한다.
   // Region Start
   ;(function (factory) {
        if (typeof define === 'function' && define.amd) {
   .... 중략
   
       $[pluginName] = plugin;
    }));
    // Region End
});

$(document).ready(function() {

// 아래 하단에 BlurBox.js의 전체를 복사 및 붙여넣기 한다.

// Region Start

;(function (factory) {

if (typeof define === 'function' && define.amd) {

.... 중략

$[pluginName] = plugin;

}));

// Region End

});

또한 Alert창이 호출되어 뒷배경을 클릭하면 자동으로 Alert창이 닫히는데 이 옵션을 막고 싶다면 var style안의 CSS 내용중에 pointer-events를 아래와 같이 변경하여 준다.

pointer-events: none

1	pointer-events: none

# Step3 – HTML내 Alert창 추가 및 호출

// HTML내 아래와 같이 Alert용 DIV 선언
<div class="payment-popup1" style="display: none;"></div>

// JavaScript함수로 호출 처리
function callAlert(id, htmlStr, width, height) {
    var idName = '#' + id;
    $(idName).width(width).height(height);
    $(idName).html(htmlStr);
    $(idName).blurbox({blur: 0, animateBlur: true, bgColor: 'rgba(0,0,0,0.4)'}).show();
};

// HTML내 아래와 같이 Alert용 DIV 선언

// JavaScript함수로 호출 처리

function callAlert(id, htmlStr, width, height) {

var idName = '#' + id;

$(idName).width(width).height(height);

$(idName).html(htmlStr);

$(idName).blurbox({blur: 0, animateBlur: true, bgColor: 'rgba(0,0,0,0.4)'}).show();

};

이때 Blurbox Alert에 들어갈 화면 코드는 동적으로 생성하여 htmlStr로 넘겨주면 해당 디자인 형태로 Blurbox Alert창이 호출된다.

Likes 0