Autor Zpráva
Padin358
Profil
Ahoj, potřeboval bych poradit.
Potřebuji udělat, aby když někdo stiskne tlačítko na webu, tak mu vyskočí vyskakovací okno. (ne ve stylu JS = alert("okno"), to ne!)
Vše mám napsané v jednom souboru, takže je v tom trochu zmatek ale vyznat se v tom dá.
Kód co zatím mám:
<div class="window">
    <div class="box">
    <div id="zavrit-banner">X</div>
    <p><strong>Vyskakovací okno</strong></p>
    <p>Zavřete kliknutím na černou plochu</p>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $("#zavrit-banner").click(function() {
          $( ".window" ).fadeOut("slow");
        });
        $(".window").click(function(e) {
           if( e.target !== this )
           return;
        $( ".window" ).fadeOut("slow");
        });
    </script>
    <style>
    .window{
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background: rgba(0,0,0,0.6);
        z-index: 500;
        }
    .window .box{
        position:relative;
        width:60%;
        height:auto;
        max-height:600px;
        margin:10% auto;
        background-color: rgba(255,255,255,0.8);
        border-radius:0px;
        box-shadow: 0 0 10px #000000;
        text-align:center;
        padding:20px 40px;
        overflow-y: auto;
        }
    #zavrit-banner{
        position: absolute;
        right: 20px;
        top: 20px;
        width: 30px;
        line-height: 30px;
        font-size: 18px;
        font-family: Verdana, Geneva, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        margin: 0;
        padding: 0;
        cursor: pointer;
        background:#900;
        color: #fff;
        transition:all 0.3s;
        }
    #zavrit-banner:hover{
        background:#162F67;
        color:#FFF;
        transition:all 0.3s;
        }
    p {
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        }
    @media screen and (max-width: 1024px) {
    .window .box {
        width: 80%;
        max-height: 80%;
        margin: 5% auto;
        }
</style>
Keeehi
Profil
Živá ukázka
Zobrazení je nastavené na klávesu s.
Padin358
Profil
Keeehi:
Ale já potřebuji aby se to zobrazilo po stiknutí tlačítka na webu ne na klávesnici.
Keeehi
Profil
Aha, tak to jsme si nerozuměli. Nicméně je to téměř to samé. Vytvoříš si nějaké tlačítko s nějakou třídou třeba. V kódu co jsem přidal já vyměníš document za tu třídu a keypress za click. A máš hotovo.
Padin358
Profil
Keeehi:
Moc děkuju, strašně jsi mi pomohl.


Mohl bych se ještě zeptat jak udělat aby se to nezobrazovalo když přijdu na stránku? (PS: nejde to zavřít, načtu stránku v počítači a to vyskakovací okno nejde zavřít. Nevíš co s tím?)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0