| Autor | Zpráva | ||
|---|---|---|---|
| Padin358 Profil |
#1 · Zasláno: 19. 4. 2021, 08:13:58
Ahoj,
píšu další diskusi protože mám problém. Udělal jsem vyskakovací okno které reaguje na stisknutí tlačítka. Ale zobrazí se už při otevření webu a nejde zavřít tlačítkem X. Pokud to dáte do Živého náhledu tak to nebude fungovat. Musíte to rozjet na vašem počítači. Kód: <!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="" class="lp">test</a>
<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>
$("#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");
}
});
</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>
</body>
</html> |
||
| blaaablaaa Profil |
#2 · Zasláno: 19. 4. 2021, 10:42:46
Padin358:
Chybi tam prilinkovat jquery. |
||
| Padin358 Profil |
blaaablaaa:
A jak mám udělat to aby se to nezobrazovalo když tam mám jQuery: <script src="ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>?
|
||
| Keeehi Profil |
#4 · Zasláno: 19. 4. 2021, 20:16:34
Padin358:
A co jsi během těch tří dní vyzkoušel a nefungovalo ti? Řešení má jeden řádek, tak by mě zajímalo co jsi zkoušel a nefungovalo ti to. Protože ono se to samo nenaprogramuje a my ti to celé také dělat nebudeme. Tedy někdo může, ale od toho je tu pak jiná sekce. |
||
| Padin358 Profil |
#5 · Zasláno: 20. 4. 2021, 10:07:31
Keeehi:
udělal jsem to že to reaguje na tlačítko, ale já potřebuju vědět jak udělat to že se to nebude zobrazovat když otevřu stránku |
||
| anonym_ Profil * |
#6 · Zasláno: 20. 4. 2021, 10:16:02
Padin358:
A co jdi zkusil udělat pro to, aby se to při načtení stránky nezobrazilo? Ve tvém kódu není o nic takového ani pokus. |
||
| Kajman Profil |
#7 · Zasláno: 20. 4. 2021, 14:56:47
Tak mu třeba přes css řekněte, že nemá být vidět.
.window {display:none} |
||
| Padin358 Profil |
#8 · Zasláno: 21. 4. 2021, 08:14:43
Kajman:
když přes css dám display: none; tak se mi to nezobrazí ani když chci |
||
| Kajman Profil |
#9 · Zasláno: 21. 4. 2021, 08:31:08
Dejte odkaz na živou ukázku.
|
||
| anonym_ Profil * |
#10 · Zasláno: 21. 4. 2021, 08:44:05
Padin358:
Ono se to po kliku na ten odkaz začne zobrazovat, ale než se to stihne, provede se obnovení stránky (protože klikás na odkaz). Najdi si, jak zrušit výchozí akci odkazů, tedy aby nedošlo k redirectu stránky. |
||
| Padin358 Profil |
#11 · Zasláno: 22. 4. 2021, 06:54:58
|
||
| Kajman Profil |
#12 · Zasláno: 22. 4. 2021, 08:55:41
Proč tam máte display:block místo display:none?
Zobrazení tam máte ve chvíli, kdy se na odkaz klikne a ještě tam máte podmínku na klávesu s, ale takto to nejde zapsat, událost kliknutí klávesu s nepřečte. Pokud to takto potřebujete, tak si musíte udělat tři události 1. událost stlačení klávesy - otestuje, že to je klávesa s a případně nahodí do sdílené proměnné, že je stlačená 2. událost puštění klávesy - otestuje, že to je klávesa s a případně zruší příznak ve sdílené proměnné, že je stlačená 3. událost kliknutí na odkaz - otestuje stav sdílené proměnné a podle toho okno otevře nebo ne V ukázce je varianta bez klávesy s, protože tipuji, že tu klávesu tam máte omylem. Živá ukázka |
||
| Padin358 Profil |
#13 · Zasláno: 22. 4. 2021, 09:22:10
Kajman:
Děkuju! Už to funguje správně! Moc děkuju! |
||
| Keeehi Profil |
#14 · Zasláno: 22. 4. 2021, 09:24:44
Kajman:
Tu klávesu tam má ode mě. Nejprve jsem ho špatně pochopil. Pak jsem mu napsal, jak to z klávesy předělat na klik na element ale i s tím má problém. |
||
|
Časová prodleva: 3 roky
|
|||
0