Wyskakujący popup, co powinien zawierać kod?

0

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.

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0