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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="popup"></div> <div id="hide"></div> <button data-id="33688">Otevřít okno ID:1</button> <button data-id="31787">Otevřít okno ID:2</button> <button data-id="31787">Otevřít okno ID:3</button>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#popup{ position:absolute; left:50%; top:50%; width:200px; height:200px; transform: translate(-50%,-50%); background-color:#FF0000; z-index:5; display:none; } #hide{ position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:rgba(0,0,0,0.75); z-index:4; display:none; }
CSS
Autoformát
CSS reset
Až na konci
$("button").click(function(){ var dataString = 'id1=' + $(this).attr("data-id"); $.ajax({ type: "POST", url: "http://kantry.funsite.cz/lyrics.php", data: dataString, cache: false, success: function(data) { $("#hide").show(); $("#popup").html(data).show(); } }); }); $("#hide").click(function(){ $(this).hide(); $("#popup").hide(); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>