Modal Popup wird nicht angezeigt in asp.net

Question

Ich versuche, ein modales Popup in asp.net zu machen (nur CSS und JS), aber wenn Sie auf die Schaltfläche klicken. Der Hintergrund zeigt sich und schließt sehr schnell. und das Modal zeigt nicht. Das ist der Code.

asp.net

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

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">×</span> 
     <h2>Modal Header</h2> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the Modal Body</p> 
     <p>Some other text...</p> 
    </div> 
    <div class="modal-footer"> 
     <h3>Modal Footer</h3> 
    </div> 
    </div> 

</div> 

css:

/* The Modal (background) */ 
.modal { 
    display: none; /* 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; 
} 

javascript:

<script type="text/javascript"> 
// 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 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> 

aber es funktioniert nicht. Ich folgte dieser Tuttorial hier: W3Schools EDIT: Ich entfernte die geschnippelt, weil der Code einfach zu groß war und wiederholte es sich selbst. aber auch die Seite veröffentlicht und du kannst es hier testen. http://detos.azurewebsites.net/Test.aspx

die modale schließt es sich von selbst nach 1 Sekunde

Answer 1

Ich bin nicht sicher, ob ich darf eine Antwort schreiben für meinen Posten. aber ich habe den Fehler gefunden.

irgendwie, wenn Sie auf eine Schaltfläche in asp.net klicken, es aktualisiert die Seite. und nachdem ich diesen Knopf gewechselt hatte, funktionierte es perfekt.

Answer 2

Versuchen diesen Code zu entfernen, ich denke, das ist das Problem

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