HTML, CSS, JavaScript, JQuery : 간단한 모달 상자를 만드는 방법 : 예제, 구현

HTML, CSS, JavaScript, JQuery : 간단한 모달 상자를 만드는 방법 : 예제, 구현

 

모달 박스에 사용할 플러그인이 많이 있지만 화면에 박스로 메시지를 표시하는 간단한 작업은 너무 복잡합니다. 직접 빌드하기로 결정 했고 이 튜토리얼에서는 jquery에서 간단한 모달 박스를 만드는 방법에 대해 알아보겠습니다.

 

 

어떤 기능의 모달?

링크를 클릭하면 나머지 화면이 검게 표시되고 내부에 사용자 정의 메시지가 있는 박스와 모달 상자를 제거하는 닫기 버튼이 있는 jquery 플러그인을 구현합니다. 플러그인 내부에 상자와 스타일을 만드는 모든 작업을 유지하고 있으므로 플러그인을 문서에 포함시키는 것 외에는 아무것도 할 필요가 없습니다. 일반적으로 다른 플러그인을 사용하면 상자를 직접 구성해야하며 jquery 플러그인이 표시합니다. 플러그인이 모달 상자를 만들고 스타일을 지정하기를 원합니다. 이렇게하면 HTML에 훨씬 쉽게 추가하고 모달 상자를 빠르게 표시 할 수 있습니다.

 

 

 

HTML 코드

위에서 말했듯이 HTML과 CSS를 최소한으로 유지하고 플러그인이 작동하게 할 것입니다. 따라서 HTML은 매우 간단합니다. 링크의 click 이벤트에서 이 실행을 원하므로 나중에 참조할 수 있도록 링크를 작성하고 클래스를 추가해야 합니다.

 

<a href="#" class="paulund_modal">Click Here</a>

 

CSS가 없으므로 JQuery 플러그인을 바로 작성할 수 있습니다.

 

 

 

Create The JQuery Modal Box Plugin

먼저 jQuery 플러그인 생성의 기본 구조부터 시작하겠습니다. 새 자바 스크립트 파일을 만들어 jquery.paulund_modal_box.js라고 부르고 웹 페이지와 같은 폴더에 저장합니다.

 

(function($){

    // Defining our jQuery plugin
    $.fn.paulund_modal_box = function(prop){

        // Default parameters

        var options = $.extend({
            height : "250",
            width : "500",
            title:"JQuery Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "30%",
        },prop);

        return this.click(function(e){
             //Do stuff here
        });

        return this;
    };

})(jQuery);

 

위의 JQuery 플러그인의 기본 구조는 paulund_modal_box라는 플러그인을 만들고 엘리먼트의 click 이벤트에서 무언가를 수행합니다. 또한 상자를 구성하는 데 사용할 수있는 여러 가지 기본 매개 변수를 넣었습니다. 나중에 변경할 수 있도록 매개 변수로 설정했습니다. 클릭 이벤트에서 모달 박스를 만들 것입니다. 페이지에 HTML 또는 CSS를 포함하지 않았으므로 여러 가지 다른 작업을 수행해야합니다.

1. 모달 상자 만 볼 수 있도록 나머지 화면을 차단 
2. 모달 박스 HTML을 만들기
3. 두 가지 새로운 엘리먼트를 꾸미기 
4. 마지막으로이 모든 것이 끝나면 모달 박스를 표시

클릭 이벤트에 이러한 기능이 필요합니다.

 

return this.click(function(e){
    add_block_page();
    add_popup_box();
    add_styles();

    $('.paulund_modal_box').fadeIn();
});

 

이제 우리가 사용하고자하는 기능의 구조를 가지고 기능을 추가 할 수 있습니다.

 

 

 

Add Block Page

화면에 모달 상자가 있는 동안 사용자가 페이지의 다른 영역에 액세스하지 못하게하는 블랙아웃 div가 될 것입니다. 그것은 전체 화면을 덮을 div 일 뿐이며 이 div 안에 모달 상자를 넣을 것입니다. add_block_page () 함수를 작성하십시오.이 함수는 div를 작성하여 HTML의 body 태그에 추가합니다.

 

function add_block_page(){
    var block_page = $('<div class="paulund_block_page"></div>');

    $(block_page).appendTo('body');
}

 

이 상자가 전체 화면을 차지하고 화면을 차단하도록 하여 스타일링 기능에 스타일을 추가 할 수 있습니다.

 

function add_styles(){          
        /*Block page overlay*/
    var pageHeight = $(document).height();
    var pageWidth = $(window).width();

    $('.paulund_block_page').css({
        'position':'absolute',
        'top':'0',
        'left':'0',
        'background-color':'rgba(0,0,0,0.6)',
        'height':pageHeight,
        'width':pageWidth,
        'z-index':'10'
    });
}

 

이제이 div에서 화면이 차단되었으므로 모달 상자를 추가 할 수 있습니다.

 

 

 

Create Modal Box

모달 박스를 만들기 위해 add_popup_box () 함수를 사용합니다.

 

function add_popup_box(){
     var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
    $(pop_up).appendTo('.paulund_block_page');

    $('.paulund_modal_close').click(function(){
            $('.paulund_block_page').fadeOut().remove();        
            $(this).parent().fadeOut().remove();                     
    });
}

 

제목, 설명 및 상자를 닫을 수 있는 링크가 있는 div가 생성됩니다. 그런 다음 모달 상자를 차단된 div에 추가하고 닫기 상자에 클릭 이벤트를 만들어 모달 상자를 제거합니다. 위와 같이 모달 박스의 스타일을 추가해야 하므로 위에서 만든 add_styles 함수에 다음을 추가하십시오.

 

         $('.paulund_modal_box').css({ 
        'position':'absolute', 
        'left':options.left,
        'top':options.top,
        'display':'none',
        'height': options.height + 'px',
        'width': options.width + 'px',
        'border':'1px solid #fff',
        'box-shadow': '0px 2px 7px #292929',
        '-moz-box-shadow': '0px 2px 7px #292929',
        '-webkit-box-shadow': '0px 2px 7px #292929',
        'border-radius':'10px',
        '-moz-border-radius':'10px',
        '-webkit-border-radius':'10px',
        'background': '#f2f2f2', 
        'z-index':'50',
    });
    $('.paulund_modal_close').css({
        'position':'relative',
        'top':'-25px',
        'left':'20px',
        'float':'right',
        'display':'block',
        'height':'50px',
        'width':'50px',
        'background': 'url(images/close.png) no-repeat',
    });
    $('.paulund_inner_modal_box').css({
        'background-color':'#fff',
        'height':(options.height - 50) + 'px',
        'width':(options.width - 50) + 'px',
        'padding':'10px',
        'margin':'15px',
        'border-radius':'10px',
        '-moz-border-radius':'10px',
            '-webkit-border-radius':'10px'
    });

 

이제 JQuery 플러그인이 완료되었습니다.

 

 

 

최종 JQuery Plugin

단계를 놓친 경우 완성된 JQuery 플러그인이 있습니다.

 

(function($){

    // Defining our jQuery plugin

    $.fn.paulund_modal_box = function(prop){

        // Default parameters

        var options = $.extend({
            height : "250",
            width : "500",
            title:"JQuery Modal Box Demo",
            description: "Example of how to create a modal box.",
            top: "20%",
            left: "30%",
        },prop);

        return this.click(function(e){
            add_block_page();
            add_popup_box();
            add_styles();

            $('.paulund_modal_box').fadeIn();
        });

         function add_styles(){         
            $('.paulund_modal_box').css({ 
                'position':'absolute', 
                'left':options.left,
                'top':options.top,
                'display':'none',
                'height': options.height + 'px',
                'width': options.width + 'px',
                'border':'1px solid #fff',
                'box-shadow': '0px 2px 7px #292929',
                '-moz-box-shadow': '0px 2px 7px #292929',
                '-webkit-box-shadow': '0px 2px 7px #292929',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px',
                'background': '#f2f2f2', 
                'z-index':'50',
            });
            $('.paulund_modal_close').css({
                'position':'relative',
                'top':'-25px',
                'left':'20px',
                'float':'right',
                'display':'block',
                'height':'50px',
                'width':'50px',
                'background': 'url(images/close.png) no-repeat',
            });
                        /*Block page overlay*/
            var pageHeight = $(document).height();
            var pageWidth = $(window).width();

            $('.paulund_block_page').css({
                'position':'absolute',
                'top':'0',
                'left':'0',
                'background-color':'rgba(0,0,0,0.6)',
                'height':pageHeight,
                'width':pageWidth,
                'z-index':'10'
            });
            $('.paulund_inner_modal_box').css({
                'background-color':'#fff',
                'height':(options.height - 50) + 'px',
                'width':(options.width - 50) + 'px',
                'padding':'10px',
                'margin':'15px',
                'border-radius':'10px',
                '-moz-border-radius':'10px',
                '-webkit-border-radius':'10px'
            });
        }

         function add_block_page(){
            var block_page = $('<div class="paulund_block_page"></div>');

            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
             $(pop_up).appendTo('.paulund_block_page');

             $('.paulund_modal_close').click(function(){
                $(this).parent().fadeOut().remove();
                $('.paulund_block_page').fadeOut().remove();                 
             });
        }

        return this;
    };

})(jQuery);

 

 

 

The JQuery Plugin 사용하기

HTML로 돌아가서 JQuery와 플러그인을 헤드 태그에 포함시켜야합니다.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.paulund_modal_box.js"></script>

 

 

이제 플러그인이 페이지에 포함되어 있으므로 링크에 할당하고 클릭 이벤트에서 모달 상자를 호출 할 수 있습니다. 닫는 본문 태그 바로 위에 스크립트 태그를 작성하고 다음을 추가하십시오.

 

<script>
$(document).ready(function(){
    $('.paulund_modal').paulund_modal_box();
});
</script>

 

이제 링크를 클릭하면 플러그인에서 모달 상자가 표시됩니다. 이 링크를 클릭 할 때마다 .paulund_modal 클래스로 여러 개의 링크를 작성하면 모달 상자가 표시됩니다.

 

 

 

Parameters 사용

튜토리얼을 시작할 때 모달 박스를 구성하는 데 사용되는 기본 매개 변수에 대해 이야기했습니다. 이제 이것을 사용하여 모달 상자 안의 텍스트 또는 상자 크기를 변경할 수 있습니다. 다음은 필요에 맞게 매개 변수를 변경하는 방법입니다.

 

<script>
$(document).ready(function(){
    $('.paulund_modal').paulund_modal_box();
    $('.paulund_modal_2').paulund_modal_box({
        title:'Second Title Box',
        description:'Custom description for box <br/><br/>Quisque sodales odio nec dolor porta sed laoreet mauris pretium. Aenean id mauris ligula, semper pulvinar dolor. Suspendisse rutrum, libero eu condimentum porta, mauris mauris semper augue, ut tempor nunc arcu vel ligula. Quisque orci eros, consequat vel iaculis eget, blandit bibendum est. Morbi ac tellus dui. Nullam eget eros et lectus dignissim placerat. Nulla facilisi. Ut congue posuere vulputate.'
    });
    $('.paulund_modal_3').paulund_modal_box({
        title: 'Change Title with height',
        height: '500'
    });
    $('.paulund_modal_4').paulund_modal_box({
        title: 'Change Title with Width',
        width: '800'
    });
    $('.paulund_modal_5').paulund_modal_box({
        title:'Second Title Box',
        description:'Custom description for box <br/><br/>Quisque sodales odio nec dolor porta sed laoreet mauris pretium. Aenean id mauris ligula, semper pulvinar dolor. Suspendisse rutrum, libero eu condimentum porta, mauris mauris semper augue, ut tempor nunc arcu vel ligula. Quisque orci eros, consequat vel iaculis eget, blandit bibendum est. Morbi ac tellus dui. Nullam eget eros et lectus dignissim placerat. Nulla facilisi. Ut congue posuere vulputate.',
        height: '500',
        width: '800'
    });
});
</script>