Avatar billede Slettet bruger
10. marts 2018 - 10:38 Der er 7 kommentarer

Popup på hjemmeside virker ikke optimalt...

Hej Eksperter
Jeg har lavet en popup til min hjemmeside, og den virker som den skal, bortset fra én ting. Når jeg får vist popup'en, kan man se noget af selve hjemmesiden igennem popup'en.

Her er min kode:

css:
.popup-position {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}

#popup-wrapper {
  width: 600px;
  margin: 170px auto;
  text-align: left;
}

#popup-container {
  max-width:700px;
width:90%;
padding:40px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
}

script:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == &#039;block&#039;)
e.style.display = &#039;none&#039;;
else
e.style.display = &#039;block&#039;;
}
//-->
</script>

html:
(Selve popup'en)
<div id="popup-box1" class="popup-position">
<div id="popup-wrapper">
<div id="popup-container">
<p>tekst</p>
<p><a href="java script:void(0)" onclick="toggle_visibility(&#039;popup-box1&#039;);">Luk</a></p>
</div><!-- Popup container end -->
</div><!-- Popup wrapper popup end -->
</div><!-- Popupbox 1 end -->

(Knappen der trykkes på ved åbning af popup'en)
<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_">
<div id="wrapper">
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="java script:void(0)" onclick="toggle_visibility(&#039;popup-box1&#039;)">LÆS MERE</a></p>
</div><!-- Wrapper end --></div>
Avatar billede Slettet bruger
10. marts 2018 - 10:41 #1
Min hjemmeside er lavet i CMS-systemet Wordpress hvis det gør nogen forskel.
Avatar billede Slater Ekspert
10. marts 2018 - 11:13 #2
Igennem popup'en? Eller igennem baggrunden? Jeg forstår ikke helt problemet.

Popup'en kan ikke ses igennem, den har en hvid baggrund, men baggrundsboksen der dækker resten af siden er med vilje lavet med 25% gennemsigtighed, så man kan se noget gennem den.

Vil du af med det? Hvad er dit spørgsmål?
Avatar billede Slettet bruger
10. marts 2018 - 11:22 #3
Meningen var, at popup'en bliver vist, og overlapper alt på siden. Alligevel når popup'en vises og man scroller, så overlapper noget som knapper og billeder popup'en.
Avatar billede Slettet bruger
10. marts 2018 - 11:23 #4
Tekst overlapper også popup'en ligesom billeder og knapper.
Avatar billede Slettet bruger
10. marts 2018 - 11:28 #5
Jeg kan så se, at hvis jeg indsætter knappen i koden før popup'en, så bliver knappen som man trykker på gemt bag popup'en, hvilket også er meningen.
Men resten af siden overlapper stadig popup'en.
Avatar billede Slater Ekspert
10. marts 2018 - 11:33 #6
Ah, så ikke se igennem, men det er oven på popup'en. Eftersom de er absolut positioneret, kan det næsten kun ske ved at de andre elementer på siden også er.

Prøv bare at tilføje et højt z-index til din popup, f.eks. z-index: 9999;
Avatar billede Slettet bruger
10. marts 2018 - 11:47 #7
Korrekt.
Jeg kan så se, at de billeder som vises oven på popup'en er sat til: position: relative;
Jeg har forsøgt at sætte z-index til 9999; men uden nogen virkning... :-/
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester