Notice
Recent Posts
Recent Comments
Link
«   2025/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
관리 메뉴

웹개발 블로그

[css] 모달 (직접 만들기) 본문

◆CSS/기초

[css] 모달 (직접 만들기)

쿠키린 2023. 2. 15. 17:28

🔽 클릭

Document 
<!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">
    <title>Document</title>
    <style>
    /* The Modal (background) */
    .modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                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.4); /* Black w/ opacity */
        }
    
        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 50%; /* Could be more or less, depending on screen size */                          
        }
        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }


    </style>

</head>
<body>
     <!-- Trigger/Open The Modal -->
     <button id="myBtn">Open Modal</button>
 
     <!-- The Modal -->
     <div id="myModal" class="modal">
  
       <!-- Modal content -->
       <div class="modal-content">
         <span class="close">&times;</span>                                                               
         <p>Some text in the Modal..</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.getElementsByClassName("close")[0];                                          

    // When the user clicks on the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

</script>


</body>
</html>

🔽이부분은 x버튼을 안눌려도 화면을 클릭하면 모달창이 종료된다. 

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
저작자표시 동일조건 (새창열림)

'◆CSS > 기초' 카테고리의 다른 글

[css] 양옆으로 정렬하기  (0) 2023.03.28
[CSS] (BOOTSTRAP) DROP DOWN  (0) 2023.02.15
[CSS] (W3Schools) DROP DOWN  (0) 2023.02.15
'◆CSS/기초' Related Articles more