Öffnen Sie ein overlay auf das laden der Seite mit Zurb Foundation Zeigen plugin

Gab es eine weitere Frage auf dieses Thema hier, aber es hat nicht den Anschein, als ob es eine komplette Lösung gepostet und die Beispiele, die hatte in Verbindung gebracht worden sind nicht mehr aktiv, so bin ich Entsendung diese Frage als Ergebnis.

Ich bin auf der Suche einen Weg zu finden, öffnen Sie eine Zurb Foundation Reveal-modal " beim laden der Seite (genauer gesagt, ich möchte es tun, einige Sekunden nach dem laden der Seite). Ich nicht mit dem schreiben von javascript, daher bin ich nur etwas belesen, was ich haben müsste passieren, ich hoffe also, dass Sie smart JS Leute da draußen kann mir helfen.

Wenn ich wollte zeigen, wie es funktioniert out of the box würde ich:

1) einen link in der Seite mit der ID so etwas wie "openMyModal", wie:

<a href="#" id="openMyModal">This is my modal-opening link</a>

2) Gehören in die Fußzeile, die JS, die es hören wollen für das click-Ereignis auf, dass ID und öffnen Sie die entsprechende modale, auch gegeben durch ID:

<script type="text/javascript">
    $(document).ready(function() {
        $("#openMyModal").click(function() {
            $("#myModal").reveal();
        });
    });
</script>

3) von jQuery in meine Kopf-oder Fußzeile

4) Legen Sie die modale-Inhalte in einem div mit der ID oben erwähnt, irgendwo in der Fußzeile kurz vor dem tag.

<div id="myModal">
    This is my modal window.
</div>

Das funktioniert Super. Aber das gilt nur, wenn ich das öffnen will modal auf eine Benutzer-Interaktion-basis (D. H. Sie klicken auf den mitgelieferten link).

Aber das, was ich mir erhofft hatte, war die öffnung des modal automatisch nach sagen wir 5 Sekunden, sobald das laden der Seite abgeschlossen ist. Ich erwarte, dass meine, natürlich, ein DIV mit einer bestimmten ID für den modalen wie vor, wie jQuery im footer - im Grunde das gleiche setup, mit der Ausnahme, dass das javascript selbst aufrufen würde dies nicht beinhalten, das auf das klicken auf einen link mit einer speziellen ID, sondern würde einfach warten, bis das DOM geladen, wartet eine angegebene Anzahl von Sekunden (oder Millisekunden) und dann automatisch ausgelöst.

Kann mir jemand sagen, wie dies erreicht werden könnte?

InformationsquelleAutor Jean St-Amand | 2013-04-08

Ist es möglich, Sie mit Foundation 4? Die syntax ein wenig verändert zu:

<script type="text/javascript">
  $(document).ready(function() {
    setTimeout(function(){
      $("#myModal").foundation('reveal', 'open');
    }, 5000);
  });
</script>

InformationsquelleAutor Henson

2

Können Sie es genau so, wie Sie normalerweise würden, aber fügen Sie einfach ein Handbuch klicken Sie auf trigger.

setTimeout akzeptiert zwei Argumente. Eine Funktion, und die Zeit zu warten, bevor Sie es (in Millisekunden).
```
<script type="text/javascript">
$(document).ready(function() {
    $("#openMyModal").click(function() {
        $("#myModal").reveal();
    });

    setTimeout(function(){
      $("#openMyModal").click();
    }, 5000);
});
</script>
```
Oder, wenn Sie nicht wollen, ein link, einfach anrufen, der zeigen-Methode.
```
<script type="text/javascript">
$(document).ready(function() {

    setTimeout(function(){
      $("#myModal").reveal();
    }, 5000);

});
</script>
```
- Hmm. Ich vermute, dass ist sehr eng. Und ich glaube, ich verstehe das JS Sie schrieb hier - schön! Also im moment bin ich immer eine Fehlermeldung in der Konsole zeigen keine Funktion - könnte es sein, etwas abseits in der Stiftung?
- Oh, ich ging mit den no-link-option, durch die Art und Weise.
- Auf der Suche in den docs, ich denke, es ist mehr wie: $('#myModal').foundation('reveal', 'open');
- Habe zwei Fehler in Firebug diese Zeit: [code] Fehler: Permission denied to access property 'toString' TypeError: $("#introModal").Grundlage ist nicht eine Funktion [Pause zu Diesem Fehler] $('#introModal').foundation('enthüllen', 'open'); [code]
- Sie haben class="reveal-modal" auf Ihre modal div?
- Ist Stiftung JS geladen wird, bevor Ihr JS?
- Ja. Mein JS ist der Letzte laden derzeit.
InformationsquelleAutor Jason Varga

Habe ich die folgenden, um das Feuer Zurb modal auf der Seite öffnen, die mit einer zeitlichen Verzögerung.

jQuery(document).ready(function($) {

    /* Pop-up
    ================================================= */
    $(function() {
        function showpanel() {
        $('.reveal-modal').reveal({
            animation: 'fade',
            animationspeed: 800
        });
        }
        setTimeout(showpanel, 4000)
    }); 
});

InformationsquelleAutor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.