w3cshool 튜토리얼을 활용해서 Modal Box를 생성해보았다.


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
CSS, JavaScript를 활용한 Modal Box 생성하기
 
<!DOCTYPE html>
<html>
<head>
<style>
 
/* modal background */
 
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
 
/* Modal Content(내용) */
.modal-context {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
 
 
/* close button */
 
.close {
color : #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
 
 
.close: hover,
.close: focus {
color: #000;
text-decoration: none;
cursor: pointer;
} 
 
</style>
</head>
<body>
 
<h2>Modal Test</h2>
 
<button id=”myBtn”>Modal Button</button>
 
<!-- Modal -->
<div id=”myModal” class=”modal”>
  <!—Modal Content -->
<div class=”modal-content”>
  <span class=”close”>&times;</span>
  <p>modal-content~~~~~~~~~~~</p>
  </div>
</div>
 
<script>
// get the modal
var modal = document.getElementById(‘myModal’);
 
// get the button that opens the modal
var btn = document.getElementById(“myBtn”);
 
// get the <span> element that closes the modal
var span = document.getElementByClassName(“close”)[0];
 
// click the button, open the modal
btn.onclick = function() {
  modal.style.display = “block”;
}
 
// click the X button, close the modal
span.onclick = function() {
  modal.style.display = “none”;
}
 
// click anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
  modal.style.display = “none”;
}
}
 
</script>
</body>
</html>
 
cs


저작자표시 비영리 변경금지

'문돌이의 IT > JavaScript' 카테고리의 다른 글

[HTML 웹프로그래밍]자바스크립트 기본  (0) 2017.05.13
AJAX 비동기방식 페이징처리  (0) 2017.01.21
자바스크립트 함수의 사용(리턴값있는함수, 매개변수)  (0) 2016.08.02
자바스크립트 이차원배열 아파트 예제  (0) 2016.07.31
자바스크립트 prompt로 구구단 출력하기  (0) 2016.07.30

+ Recent posts

티스토리툴바