Modal PopUp 사용하기

이번에 작업을하면서 팝업이 아닌 레이어(?) 를 띄워주어야하는 요청사항이 있었습니다

처음사용해보는 기능이어서 정리해 봅니다

 

• 일반 PopUp 기능은 새창을 브라우저에 새창을 열어서 사용합니다

• Modal 의 경우는 현재 페이지 위에 다른 숨겨놓았던 HTML 로 덮어 씌우는 느낌입니다

• Modal 을 사용하면 별도의 새창 없이 간단한 안내문구나 링크 연결 등을 사용 할 수 있습니다

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

우선 jQuery 를 사용하여 숨겨진 Modal 을 화면에 띄우는 것이므로 jQuery 를 불러옵니다

 

<style>
    .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0);        background-color: transparent; }
    .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 30%; height: 40%; }
    .modal-content p { text-align: center; }
    .modal-content .title {  margin-top: 10px; margin-bottom: 10px; font-size: 24pt; }
    .modal-content #comment{  line-height: 1.5; margin-top: 18px; margin-bottom: 15px; }
    .modal-content div { text-align: center; margin-top: 8px; }
</style>
 
<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <p class="title"><b><span id="title">제목</span></b></p>
        <p id="comment">여기에 내용</p>
        <p><br><br><br>(로그인이 필요합니다.)<br><br></p>
        <div>
            필요한 요소
        </div>
    </div>
</div>
<!--End Modal-->

사용할 Modal 의 구조를 만들어줍니다

 

<script type="text/javascript">
$('.bnt').click(function() {
    $('#myModal').show();
});
function close_pop(flag) {
    $('#myModal').hide();
};    
</script>

입맛에 맞게 jQuery 로 컨트롤해 주시면 됩니다

(실제 사용한 코드에서 적당히 변형을 준 예시코드 입니다)

출처: https://tyson.tistory.com/90

Modal로 팝업 띄우기