왜 내 모달이 페이지로드시 팝업되지 않는지 확실하지 않습니다.

-1

취미 용 코딩을 시작합니다. 내 모달을 페이지로드시 팝업으로 보이지 않습니다. 빈 문서를 열면 제대로로드됩니다. 내 친구 홈페이지에로드하려고하면 아무 일도 일어나지 않습니다. 나는 Dreamweaver CC에서 일하고있다.왜 내 모달이 페이지로드시 팝업되지 않는지 확실하지 않습니다.

HTML :

<!-- The Modal --> 
<div id="myModal" class="modal"> 
    <!-- Modal content --> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <span class="close">&times;</span> 
      <h2>Update</h2> 
     </div> 
     <div class="modal-body"> 
      <h3>Hello, we regret to inform you that we are closed today due to  currently upgrading our systems. We are working diligently on this matter. We want to continue to try and provide a fast and easy system for patients to be able to place their order. As always taking care of our patients and those in our community is our highest priority. We want to thank you for your loyalty and patience and we will try to resume business as quickly as possible. </h3> 
      <h3>To stay updated with our current status and menu options follow us on Facebook.com/TheHumbleRoot and Instagram @humble_root. </h3> 
     </div> 
     <div class="modal-footer"> 
      <h3>We thank you for your patience</h3> 
     </div> 
    </div> 
</div>

CSS :

/* The Modal (background) */ 

.modal { 
    display: block; 
    /* Hidden by default */ 
    position: fixed; 
    /* Stay in place */ 
    z-index: 1; 
    /* Sit on top */ 
    padding-top: 100px; 
    /* Location of the box */ 
    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 */ 

.modal-content { 
    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; 
    } 

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

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

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

JS :

, 1 너무 낮은 그것의 가능한 Z- 인덱스이다

// Get the modal 
var modal = document.getElementById('myModal'); 
// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 
// 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"; 
    } 
}

출처

2017-01-26 Swift