Wie Javascript Modal Boxen ohne Schaltfläche anzeigen?

-3

Ich habe ein Skript, um modale Boxen mit Javascript zu öffnen, wenn Benutzer auf die Schaltfläche klicken, aber ich möchte das Skript ändern, um die modalen Kästchen anzuzeigen, wenn die Seite mit dem bestimmten Parameter geladen wird. Beispiel: http://domain.com/login?msg=incorrect passwortWie Javascript Modal Boxen ohne Schaltfläche anzeigen?

Jede Lösung?

<html> 
<head> 
<style> 
/* 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; 
} 
</style> 
</head> 
<body> 

<h2>Animated Modal with Header and Footer</h2> 

<!-- 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> 

<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 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>

Dies ist die Demo von meinem Code: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

Quelle

2016-11-08 junchou

Try

document.addEventListener('DOMContentLoaded', function() { 
    modal.style.display = "block"; 
});

Was Zugabe wird dies tun, ist:

Ein Ereignis passieren wird, wenn der DOM-Inhalt wurde geladen.
Wenn das geschieht, wird die Funktion ausgelöst, die Sie gerade
Ihre modal jetzt definiert haben, wenn automatisch

Quelle

2016-11-08 11:11:26

Hallo gezeigt ist, können Sie für Antwort danken, ich ein bisschen bekam. aber kannst du mir hier eine lösung geben: ich habe meine frage etwas modifiziert. aber ich möchte das Skript ändern, um die modalen Boxen anzuzeigen, wenn die Seite mit dem spezifischen Parameter geladen wird. Beispiel: http://domain.com/login?msg=incorrect Passwort – junchou

ich versuche document.addEventListener ('DOMContentLoaded', function() { modal.style.display = "block"; }) hinzuzufügen; zu meinem js. aber nicht automatisch angezeigt. – junchou

Ich habe es in Ihrem Beispiel versucht, und es hat für mich funktioniert (haben Sie es innerhalb der 'script' Tags hinzugefügt, und nachdem' modal' definiert wurde?). In Bezug auf die URL könnten Sie 'window.location.search === '? Msg = incorrect'' verwenden, um herauszufinden, ob der Parameter vorhanden ist oder nicht. –

Wie Javascript Modal Boxen ohne Schaltfläche anzeigen?

Antwort

Verwandte Themen