Jam's story

[JS] 모달창 본문

WEB/JavaScript

[JS] 모달창

애플쩀 2022. 6. 10. 10:49 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.10 10:28:14</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>

.modal{ 
    /* div인 .modal이 큰 gray색  */
 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{
      /* 큰 gray색 안에 초록박스 div */
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding:0;
    border:1px solid #888;
    width: 80%;
    box-shadow: 0 4px 9px 0  rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    
    animation-name:animatetop;
    animation-duration: 0.4s;
    
    -webkit-animation-name:animatetop;
    -webkit-animation-duration: 0.4s;
  }
  
    .modal-header, .modal-footer{
    background-color: #5CB85C;
    padding: 2px 16px;
    color:white;
  }
  
  .modal-body{
    padding: 2px 16px;
  }
  
 .close{
    color:white;
    float:right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover, .close:focus{
    color:#000;
    text-decoration: none;
    cursor: pointer;
  }

   /* 애니메이션 효과 */
   @keyframes animatetop{
     from{ top:-300px; opacity: 0; }
     to{ top:0; opacity: 1; }
  }
  @-webkit-keyframes animatetop{
     from{ top:-300px; opacity: 0; }
     to{ top:0; opacity: 1; }
  }
</style>
</head>
<body>
<h3>ex04.html</h3>
<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
            <p>Lorem ipsum dolor sit.</p>
            <p>Eum libero ipsum aspernatur.</p>
        </div>
        <div class="modal-footer">
            <h3>Modal Footer</h3>
        </div>
    </div>
</div>
<script>
    
    //전역변수
   var modal= document.getElementById("myModal");
   document.getElementById("myBtn").onclick=function(){
       modal.style.display="block";
   }
   document.querySelector(".modal-header span.close").onclick=function(){
       modal.style.display="none";
   }

   window.onclick=function(event){
       if(event.target==modal){
           modal.style.display="none";
       }
   }
</script>
</body>
</html>
저작자표시

'WEB > JavaScript' 카테고리의 다른 글

[JS] 쿠키  (0) 2022.06.13
[JS] 쿠키  (0) 2022.06.10
[JS] oncontextmenu (오른쪽마우스) ,onmousedown  (0) 2022.06.10
[JS]window.alert()  (0) 2022.06.10
[JS] 새창 열고 닫기  (0) 2022.06.09
'WEB/JavaScript' Related Articles more
Comments