[Javascript] Modal창 띄워주기

안녕하세요~ 이번 포스팅에서는 Modal창을 띄워주는 방법을 알아보겠습니다.

 

모달은 팝업창과 비슷하지만 약간은 다른 개념입니다.

 

팝업은 창이 띄워져 있는 동안에도 부모 페이지를 컨트롤 할 수 있지만,

 

모달은 창이 띄워져 있는 동안에는 부모 페이지를 컨트롤 할 수 없다는 차이점이 있습니다.

 

그럼 코드를 통해 어떻게 모달을 띄워서 사용하는지 알아보겠습니다.

 

<style>
    /* The Modal (background) */
    .searchModal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 10; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .search-modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 70%; /* Could be more or less, depending on screen size */
    }
</style>

<div id="modal" class="searchModal">
    <div class="search-modal-content">
        <div class="page-header">
            <h1>MODAL</h1>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-12">
                        <h2>Modal창 테스트입니다.</h2>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div style="cursor:pointer;background-color:#DDDDDD;text-align: center;padding-bottom: 10px;padding-top: 10px;" onClick="closeModal();">
            <span class="pop_bt modalCloseBtn" style="font-size: 13pt;">
            </span>
        </div>
    </div>
</div>

일단 HTML과 CSS를 작성해 주겠습니다. 

 

CSS는 꾸미고 싶은대로 꾸며주시면 되겠습니다.

 

<script>
	jQuery(document).ready(function () {
         $("#modal").show();
	});
    function closeModal() {
        $('.searchModal').hide();
    };
</script>

모달창을 띄워주고 없애주는 스크립트를 작성해 줍니다.

 

이렇게 해주면 아래처럼 모달창이 페이지 로딩 시에 나오게 됩니다.