모달 박스를 반응 형으로 만드는 방법은 무엇입니까?

이 CSS 기반 모달 상자를 구현했습니다. 완벽하게 작동하며 사용하기가 쉽습니다. 그러나 반응이 없습니다. 어떻게 대응할 수 있습니까? pls help.모달 박스를 반응 형으로 만드는 방법은 무엇입니까?

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    /* The Modal (background) */ 
    .modal4 { 
     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 content1 */ 
    .modal4-content2 { 
     position: relative; 
     background-color: #fefefe; 
     margin: auto; 
     padding: 0; 
     border: 1px solid #888; 
     width: 80%; 
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
     -webkit-animation-name: animatetop; 
     -webkit-animation-duration: 0.4s; 
     animation-name: animatetop; 
     animation-duration: 0.4s 
    } 

    /* Add Animation */ 
    @-webkit-keyframes animatetop { 
     from {top:-300px; opacity:0} 
     to {top:0; opacity:1} 
    } 

    @keyframes animatetop { 
     from {top:-300px; opacity:0} 
     to {top:0; opacity:1} 
    } 

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

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

    .modal4-header2 { 
     padding: 2px 16px; 
     background-color: #5cb85c; 
     color: white; 
    } 

    .modal4-body {padding: 2px 16px;} 

    .modal4-footer2 { 
     padding: 2px 16px; 
     background-color: #5cb85c; 
     color: white; 
    } 
    </style> 
    </head> 
    <body> 

    <h2>Animated Modal with header1 and footer1</h2> 

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

    <!-- The Modal --> 
    <div id="myModal4" class="modal4"> 

     <!-- Modal content1 --> 
     <div class="modal4-content2"> 
     <div class="modal4-header2"> 
      <span class="close">&times;</span> 
      <h2>Modal header1</h2> 
     </div> 
     <div class="modal4-body"> 
      <p>Some text in the Modal Body</p> 
      <p>Some other text...</p> 
     </div> 
     <div class="modal4-footer2"> 
      <h3>Modal footer1</h3> 
     </div> 
     </div> 

    </div> 

    <script> 
    // Get the modal 
    var modal4 = document.getElementById('myModal4'); 

    // Get the button that opens the modal 
    var btn = document.getElementById("myBtn4"); 

    // Get the <span> element that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

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

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

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

    </body> 
    </html>

출처

2017-02-28 Rushikesh Solanki

그것은 이미 당신을 취소 할 반응 친구 : –

Mabye입니다 은닉처 – Yannjoel

코드는 응답 ...하지만 당신은 여전히 응답을하지 않은 경우 다음 머리에 메타 태그 아래에 추가

이

<meta name="viewport" content="width=device-width, initial-scale=1">

출처

2017-02-28 09:58:29

모달 박스를 반응 형으로 만드는 방법은 무엇입니까?

답변

관련 문제