Wie macht man solch ein Popup ?

[Gelsas]

Hallo,

ich habe vor genau solch ein Popup nach zu bauen (), es soll nicht immer auftauchen erst wieder nach einer bestimmten Zeit, wie kann man so was lösen, und wie bekommt man auch so etwas leciht transparentes hin ?

Also so wie hier:


MfG,
Gelsas

[boxxiebabee]

Ist einfach ein div mit position fixed. Transparent über CSS oder nem png. Und das es nicht immer auftaucht löst du durch Cookies / Localstorage.

[Gelsas]

Ist das es nach ner best. zeit erst wieder auftaucht nich auch über js möglich ?

Also ich habe keinen schimmer wie ich das selber umsetzten könnte, da wäre ein wenig starthilfe praktisch ._.

Niemand der mir helfen könnte :O ? weil mit coookies hab ich keine erfahrung

niemand der mir etwas helfen könnte ._.

[iKyroja :>]

Ich habe eins in der art aber nutze es anderst.

Das wäre mein CSS (nur als Beispiel):

#display {
    position:fixed;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
    display:none;
}

.popup {
    position:fixed;
    z-index:3;
    top:50%;
    left:50%;
    width:400px;
    background:#141212;
    border-radius:3px;
    box-shadow:0 0 4px #000, 0 0 10px #000, inset 0 0 1px #222;
    margin-top: -100px;
    margin-left: -220px;
    z-index:999;;
    padding:3px;
    font-family:Arial, Helvetica, sans-serif;
    color:#42403d;
    display:none;
}

.popup h2 {
    background:#141212;
    background: -moz-linear-gradient(top, rgba(255,255,255,.04) 0%, rgba(0,0,0,.04) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.04)), color-stop(100%,rgba(0,0,0,.04)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,.04) 0%,rgba(0,0,0,.04) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,.04) 0%,#rgba(0,0,0,.04) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,.04) 0%,#rgba(0,0,0,.04) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,.04) 0%,#rgba(0,0,0,.04) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,255,255,.02)', endColorstr='rgba(0,0,0,.04)',GradientType=0 );
    border-radius:3px;
    box-shadow:0 0 4px #000, inset 0 0 1px #252525;
    display:block;
    font-weight:bold;
    padding:8px;
    font-size:16px;
    text-decoration:uppercase;
    text-shadow:0 0 4px #050505;
}

.popup-wrapper {
    padding:15px 10px 10px 10px;
    font-size: 12px;
    text-shadow:0 0 4px #050505;
}

Hier wäre dan das HTML dazu (iwo in der seite einbinden):

     <div id="display"></div>
        <div class="popup">
          <div class="popup-wrapper">
               Text blabla
          </div>
        </div>

sooo und zu guterletzt das Javascript basierend auf jQuery
Da öffnet sich nur das Popup wen man was anklickt:

PHP Code:


    $('.open-popup').live('click', function() {
        
        $('#display').fadeIn(500);
        $('.popup').delay(300).fadeIn(500);
        
    });

    $('#display, .destroy-popup').live('click', function() {
        
        $('.popup').fadeOut(500);
        $('#display').delay(300).fadeOut(500);
        
    });