Wie ein overlay erstellen, um automatisch zu laden, die beim laden der Seite?

Ich versuche, herauszufinden, wie das erstellen einer overlay-box, lädt automatisch auf die Seite geladen werden und hat dann eine OK-Taste für den Benutzer klicken, um es Weg.

Ich bin auf der Suche nach etwas ähnlich wie diese http://laurenconrad.com/

Sehen, wie das overlay erscheint, mit einem rosa semi-transparent hintergrund und ein Zeichen up-box in der Mitte? Dass die nicht zeigen, bis jedes mal, obwohl nur einmal in der Woche, glaube ich. Ich bin auf der Suche nach etwas ähnliches, dass geben die Möglichkeit, meine Website-Besucher zu abonnieren.

Ich habe versucht zu Folgen, verschiedenen tutorials, aber nichts scheint zu funktionieren sehr gut. Ich weiß nicht viel über overlays oder Skripte, so dass jede Hilfe mit CSS, HTMl und das script wäre super hilfreich!!! Danke!

Rebecca

  • gut, jQuery und jQuery UI mit Ihren modal-dialog: jqueryui.com/dialog. natürlich, wenn Sie wollen, um zu zeigen, dass nur einmal pro Woche, müssen Sie zum speichern dieser Informationen (Letzte Abbildung). Sie konnte tun, dass die Verwendung von cookies, aber ich würde das "localStorage"
InformationsquelleAutor user2734236 | 2013-08-30
  1. 2

    Dazu verwende ich jQuery. Erstellen der overlay in HTML/CSS und legen Sie die overlay-div am Anfang des Tags.

    $(document).ready(function() {
    //check cookie
    var visited = $.cookie("visited")

    //load overlay if they haven't visited
    if (visited == null) {
        $('#overlay').fadeIn();     
        $.cookie('visited', 'yes');  
    }

    //set cookie
    $.cookie('visited', 'yes', { expires: 1, path: '/' });
});

$('button').click(function () {
    $('#overlay').fadeOut(200, "linear");
});

    Dieser code lädt dein div mit der id "overlay" und wenn die ausblenden-Schaltfläche geklickt wird, wird der div ausgeblendet. Sie hätte das div ausblenden, indem Sie einfach auf das overlay-div, wenn Sie bevorzugen. Durch die Nutzung dieser:

    $('#overlay').click(function () {
    $('#overlay').fadeOut(200, "linear");
});

    Hier ist ein Turnschuh, Ihnen zu zeigen, was ich meine:
    http://jsfiddle.net/andaywells/jWcqZ/17/

    • Ich habe Uncaught TypeError: undefined ist nicht eine Funktion für diese Zeile var visited = $.cookie("visited") irgendwelche Ideen?
    InformationsquelleAutor Andrew Wells
  2. 1

    Beginnen mit dem overlay auf der Seite geladen, aber ausgeblendet.

    Dann verwenden jQ dom auf ready-Ereignis, um zu zeigen, das overlay.

    Dies ist die einfachste überlagerungen, die Sie tun können: http://jsfiddle.net/ninty9notout/6gaND/

    $('#overlay').css({'opacity': 0, 'display': "block"});
$('#overlay').animate({'opacity': 1}, 1000).on("click", function() {
    $('#overlay').animate({'opacity': 0}, 1000);
});

    Genießen!

    • In der fiddle, ändern Sie die Positionierung Eigenschaft von #overlay aus position:absolute zu position:fixed zur Abdeckung der gesamten Seite. 🙂
    InformationsquelleAutor ninty9notout
Schreibe einen Kommentar