Chciałbym aby po kliknięciu na przycisk wyskakiwał popup. Jednak chce aby ten popup wyskakiwał w miejscu w ktorym w danym moemencie jesteśmy na stronie. Nie chcę np. zeby po nacisnieciu przycisku strona została zeskrolowana do góry i dopiero tam został wyświetlony popup. Chce zeby on zostal wyswietlony w miejscu w ktorym jestesmy obecnie na stronie, bez zadnych scrollowan.
0
2
Wyharatane z czegoś większego, ale powinno działać:
/* --- kurtyna --- */
#kurtyna {
display:none;
background-color:black;
opacity:0.2;
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
z-index:100;
}
/* --- /kurtyna --- */
/* --- kalendarz --- */
#kalendarz {
display:none;
position:absolute;
top:0px;
left:0px;
width:300px;
padding-bottom:25px;
z-index:110;
}
/* --- /kalendarz --- */
/* --- kalendarz pokaż --- */
function kalendarz_otworz(element) {
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
przycisk_gora = elemRect.top - bodyRect.top,
przycisk_lewo = elemRect.left - bodyRect.left;
var przycisk_dlug = element.offsetWidth;
/* */
var kal = document.getElementById("kalendarz");
var kal_gora = przycisk_gora - 120;
var kal_lewo = przycisk_lewo + (przycisk_dlug/2) - 150;
kal.style.top = kal_gora + "px";
kal.style.left = kal_lewo + "px";
kal.style.display = "block";
/* */
document.getElementById("kurtyna").style.display = "block";
}
/* --- /kalendarz pokaż --- */
/* --- kalendarz ukryj --- */
function kalendarz_zamknij() {
var kal = document.getElementById("kalendarz");
kal.style.display = "none";
kal.style.top = "0px";
kal.style.left = "0px";
/* */
document.getElementById("kurtyna").style.display = "none";
}
/* --- /kalendarz ukryj --- */
Klikany przycisk powinien przekazać:
kalendarz_otworz(this)
W kodzie strony muszą być obecne DIV-y kurtyna i kalendarz.
p.s. A @mr_jaro pewnie przyjdzie i pokaże ci zamiast tego jakieś jednolinijkowe wywołanie z jakiegoś frejmłorka :)
0
Wkleiłem to na jsfiddle i coś nie działa poprawnie: https://jsfiddle.net/h07fypd8/
Tym sposobem również nie działa: https://jsfiddle.net/z7y4o0bk/1/ (dodałem clicka w jsie a nie w htmlu)
0
Tak będzie działać (kliknięcie poza oknem, zamyka je):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style id="compiled-css" type="text/css">
BODY, HTML {
padding:0px;
margin:0px;
}
/* --- kurtyna --- */
#kurtyna {
display:none;
background-color:black;
opacity:0.2;
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
z-index:100;
}
/* --- /kurtyna --- */
/* --- kalendarz --- */
#kalendarz {
display:none;
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
z-index:110;
border:1px solid red;
background-color:white;
}
/* --- /kalendarz --- */
</style>
</head>
<body>
<div id="kurtyna" onclick="kalendarz_zamknij(this);"></div>
<div id="kalendarz">okienko</div>
<button onclick="kalendarz_otworz(this)">Click me</button>
<br><br><br><br><br><br>
aaaaaaaaaaaaaaaaaaaa <button onclick="kalendarz_otworz(this)">Click me</button>
<br><br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <button onclick="kalendarz_otworz(this)">Click me</button>
<script>
/* --- blokuj propagację akcji --- */
function blokuj_propagacje_akcji(akcja) {akcja.stopPropagation();}
/* --- /blokuj propagację akcji --- */
/* --- kalendarz pokaż --- */
function kalendarz_otworz(element) {
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
przycisk_gora = elemRect.top - bodyRect.top,
przycisk_lewo = elemRect.left - bodyRect.left;
var przycisk_dlug = element.offsetWidth;
/* */
var kal = document.getElementById("kalendarz");
var kal_gora = przycisk_gora - 50;
var kal_lewo = przycisk_lewo + (przycisk_dlug/2) - 50;
kal.style.top = kal_gora + "px";
kal.style.left = kal_lewo + "px";
console.log(przycisk_gora, przycisk_lewo);
kal.style.display = "block";
/* */
document.getElementById("kurtyna").style.display = "block";
}
/* --- /kalendarz pokaż --- */
/* --- kalendarz ukryj --- */
function kalendarz_zamknij() {
var kal = document.getElementById("kalendarz");
kal.style.display = "none";
kal.style.top = "0px";
kal.style.left = "0px";
/* */
document.getElementById("kurtyna").style.display = "none";
}
/* --- /kalendarz ukryj --- */
</script>
</body>
</html>
0
Metoda
blokuj_propagacje_akcji()
zdaje sie ze nie jest nigdzie wykorzystywana?
0
kaczor19 napisał(a):
Metoda
blokuj_propagacje_akcji()zdaje sie ze nie jest nigdzie wykorzystywana?
Tak, nie jest tu potrzebna.