Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<a href="" class="lp">test</a> <div class="window"> <div class="box"> <div id="zavrit-banner">X</div> <h1 class="h1"><strong>...................</strong></h1> <p class="p1"><strong>.................</strong></p> <p class="p2"> <strong class="strng1">...............</strong><br>..............................................................................................................</p> <p class="p3"><strong>..............</strong></p> <p class="p4"><strong class="strng2">...</strong><br>....................................................................................................... </p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.window{ display: block; 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; background-color: #4e91cf; 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%; }
CSS
Autoformát
CSS reset
Až na konci
$("#zavrit-banner").click(function() { $( ".window" ).fadeOut("slow"); }); $(".window").click(function(e) { if( e.target !== this ) return; $( ".window" ).fadeOut("slow"); }); $(".lp").click(function(e) { if (e.key == "s") { $(".window").fadeIn("slow"); } });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>