Wie öffne ich dieses modale bei Timeout?

Ich erstelle ein Modal mit CSS und HTML, aber möchte es nach 3 Sekunden beim Laden der Seite mit jquery laden. Es fällt mir schwer, den richtigen Event-Handler dafür zu finden. Was ist der beste Weg, dies zu tun?Wie öffne ich dieses modale bei Timeout?

Modal unten

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script> 
</head> 
<body> 
    <span id="about" class="target"></span> 
    <div class="modal"> 
    <div class="content" style="height: 425px; width: 425px;"> 
     <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2> 
     <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p> 
     <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p> 
     <a class="close-btn" href="#start">X</a> 
     <button class="cart-button" style="width: 189px;height: 49px;"> 
     View Cart</button> 
    </div> 
</div> 
<div class="page-container"> 
    <p><a href="#about">Open Modal Window</a> 
</div> 

    <script type="text/javascript" src="script.js"></script> 
</body> 
</html>

Javascript

window.onload =() => { 
    setTimeout(() => { 
     console.log('time'); 
    }, 3000); 

}

Quelle

2017-08-30 Kenzo

was js Sie die modale –

für die Öffnung so weit verwenden, wie ich JQUERY von weiß er selbst nicht modal visuelle haben. Sie müssen eine Erweiterung (Bootstrap zum Beispiel) verwenden – Stavm

_ "Ich habe es schwer, den richtigen Event-Handler dafür zu finden" _ - wie? Sie haben das Loadereignis offensichtlich schon gefunden. Erreicht das nicht, was Sie wollen? Das Ladeereignis wird ausgelöst, wenn alle externen Ressourcen (Stylesheets, Images usw.) vollständig geladen sind. Wenn Sie das nicht möchten, möchten Sie vielleicht lieber das Ereignis DOMContentReady oder etw. so wie das. – CBroe

Hier gehen Sie mit einer Lösung https://jsfiddle.net/7pgrzp7d/

setTimeout(function(){ 
 
    $('.modal').modal({show:true}); 
 
}, 3000);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<span id="about" class="target"></span> 
 
    <div class="modal"> 
 
    <div class="content" style="height: 425px; width: 425px;"> 
 
     <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2> 
 
     <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p> 
 
     <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p> 
 
     <a class="close-btn" href="#start">X</a> 
 
     <button class="cart-button" style="width: 189px;height: 49px;"> 
 
     View Cart</button> 
 
    </div> 
 
</div> 
 
<div class="page-container"> 
 
    <p><a href="#about">Open Modal Window</a> 
 
</div>

Hoffe, das wird Ihnen helfen.

Quelle

2017-08-30 14:48:18 Shiladitya

einige Annahmen zu machen, ich habe die modal über CSS (inline wie Ihr Code) versteckt, dann nach 3 Sekunden, um es erscheinen ließ:

https://jsfiddle.net/pv7j5qdt/

$(document).ready(function() { 
 
\t setTimeout(function(){ 
 
    \t $('.modal').show(); 
 
    }, 3000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="about" class="target"></span> 
 
    <div class="modal" style="display: none;"> 
 
    <div class="content" style="height: 425px; width: 425px;"> 
 
     <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2> 
 
     <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p> 
 
     <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p> 
 
     <a class="close-btn" href="#start">X</a> 
 
     <button class="cart-button" style="width: 189px;height: 49px;"> 
 
     View Cart</button> 
 
    </div> 
 
</div> 
 
<div class="page-container"> 
 
    <p><a href="#about">Open Modal Window</a> 
 
</div>

Well

Quelle

2017-08-30 14:48:40 wrayvon

Dies funktioniert. Vielen Dank! – Kenzo

Es ist ziemlich seltsam, es gibt mindestens 3 Fragen in den letzten 23 Stunden basierend auf dem gleichen Titel Bitte erstellen Sie keine Duplikationsfragen andere Konten. https://stackoverflow.com/questions/45963426/how-do-i-open-this-modal-on-timeout/45963535?s=10|0.0000#45963535 https://stackoverflow.com/questions /45963426/how-do-i-open-this-modal-on-timeout/45963535?s=10|0.0000#45963535 https://stackoverflow.com/questions/45963426/how-do-i-open- this-modal-on-timeout? s = 12 | 0,0000 – rogue39nin

Ich fügte eine Klasse hidden hinzu und fügte es dem modalen hinzu. Eigentum ist ein display:none;. Nach 3 Sekunden ich dies nur durch show() mit entfernen:

window.onload =() => { 
 
    setTimeout(() => { 
 
     $('div.modal').show(); 
 
    }, 3000); 
 
}

.hidden{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="about" class="target"></span> 
 
    <div class="modal hidden"> 
 
    <div class="content" style="height: 425px; width: 425px;"> 
 
     <h2 style="margin-bottom: 30px;margin-top: 50px;">Welcome back!</h2> 
 
     <p style="margin-bottom: 0px;margin-top: 0px;">You left something in your cart.</p> 
 
     <p style="margin-bottom: 43px; margin-top: 0px;"> Check out today!</p> 
 
     <a class="close-btn" href="#start">X</a> 
 
     <button class="cart-button" style="width: 189px;height: 49px;"> 
 
     View Cart</button> 
 
    </div> 
 
</div> 
 
<div class="page-container"> 
 
    <p><a href="#about">Open Modal Window</a> 
 
</div>

Quelle

2017-08-30 14:49:51 hallleron

Wie öffne ich dieses modale bei Timeout?

Antwort

Verwandte Themen