05-15 15:58
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[Programming / WebApp] Modal Dialog 예제 본문

Programming/Web App

[Programming / WebApp] Modal Dialog 예제

cinema4dr12 2016. 7. 28. 18:31

이번 글에서는 Modal Dialog를 작성하는 방법에 대해 알아보고자 한다.

본 예제는 W3Schools.com의 예제를 기반으로 jQuery로 동작하도록 작성한 것이며, 버전 3.0.0을 이용하여 작성되었지만, 이전 버전에서도 큰 문제없이 동작하리라 생각된다.


편의를 위해 jQuery 3.0.0 소스를 첨부한다: 


jquery-3.0.0.min.js


HTML

다음과 같이 index.html 파일을 작성한다:


[index.html]

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./modal-dialog.css">
</head>

<body>
<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div id="modal-content" class="modal-content">
    <span class="close">×</span>
    <p>Some text in the Modal..</p>
  </div>

</div>
</body>

<!-- scripts -->
<script src="./jquery-3.0.0.min.js"></script>
<script src="./modal-dialog.js"></script>

</html>


CSS

CSS 파일을 다음과 같이 작성한다:


[modal-dialog.css]

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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.8); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


JavaScript

JavaScript 파일을 다음과 같이 작성한다:


[modal-dialog.js]


결과

위의 코드의 결과는 다음과 같다.



Line 4-9: Tag ID가 "myBtn"으로 되어 있는 요소(button)를 클릭하면, Tag ID가 "myModal"인 요소(Modal Dialog)에 display 속성을 "block"으로 지정하며, 블록박스로 만든다.

display 속성에 대한 자세한 내용은 http://www.w3schools.com/cssref/pr_class_display.asp를 참고한다.


Line 11-15: "close"라는 Class를 갖는 Tag(close button)를 클릭하면 Modal Dialog의 display 속성을 "none"으로 지정하며, 이는 Modal Dialog가 사라지도록 한다.


Line 17-25: HTML 페이지의 click 이벤트를 받고, 이 이벤트가 발생한 Tag의 ID가 "myModal"인 경우 Modal Dialog를 숨긴다. 이것은 우리의 눈에 Modal Dialog로 보이는 "myModal" Tag ID의 외곽을 클릭한 것으로 처리하여 다이얼로그가 닫히는 것처러 처리하기 위함이다.


[Open Modal] 버튼을 클릭하면 아래 이미지와 같이 Modal Dialog가 팝업된다.



'Programming > Web App' 카테고리의 다른 글

[Programming / WebApp] CSS 전처리기 – Sass  (0) 2016.08.15
[Programming / WebApp] Canvas Touch Gesture 예제  (0) 2016.08.03
[WebApp / CSS] Image Reflection  (0) 2016.07.16
[WebApp / Electron] Electron App Packaging  (0) 2016.07.09
[WebApp / Electron] Electron App Template  (0) 2016.07.09
공유하기 링크
'Programming/Web App' Related Articles more
Comments