728x90
목동코딩: 코딩교육
필요에 따라서 모달폼을 열고 닫는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<title>Document</title>
<style>
/* The Modal (background) */
.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: rgba(0,0,0,0.4);
}
/* Modal Content/Box */
.modal-content {
background-color: #ffffff;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 30%; /* Could be more or less, depending on screen size */
}
</style>
</head>
<body>
<input type="button" onclick="open_pop();" value="open" />
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- 모달폼 시작 -->
<div class="modal-content" style="background-color: #000000;">
<img class="bd-placeholder-img" width="100%"
src="http://nooh-system.com/images/logo_nooh_white.png" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<p style="text-align: center;"><span style="font-size: 14pt;"><b><span style="font-size: 24pt;">공지</span></b></span></p>
<p style="text-align: center; line-height: 1.5;"><br />여기에 내용</p>
<p><br /></p>
<div style="cursor:pointer;background-color:#DDDDDD;text-align: center;padding-bottom: 10px;padding-top: 10px;" onClick="close_pop();">
<span class="pop_bt" style="font-size: 13pt;" >
닫기
</span>
</div>
</div>
</div>
<!--모달폼 종료-->
<script type="text/javascript">
jQuery(document).ready(function() {
});
//팝업 보기
function open_pop() {
$('#myModal').show();
};
//팝업 단기
function close_pop(flag) {
$('#myModal').hide();
};
</script>
</body>
</html>
728x90
'코딩교육 > Web' 카테고리의 다른 글
| 목동코딩,Ajax Click으로 Delete Table Row (0) | 2021.09.20 |
|---|---|
| 목동코딩, Html Ajax 복수의 Input에서 value값 가져오는 방법! (0) | 2021.09.18 |
| 목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법 (0) | 2021.09.15 |
| 목동코딩, html, Input 입력 유효성 체크하는 방법 (0) | 2021.09.15 |
| 목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법 (0) | 2021.09.14 |