Popup znikający po kliknięciu poza modal.

Question

Dzień dobry,

potrzebowałabym pomocy w jednej kwestii. Zrobiłam Popup, który można zamknąć po kliknięciu w "X" oraz napis "Zamknij". Dodatkowo podczas wejścia w popup znika scrollowanie strony głównej. Niestety nie potrafię dodać do kodu możliwości zamknięcia okna popup po naciśnięciu gdzieś poza niego. Udało się jedynie, że znika, jeśli naciśniemy gdziekolwiek, nawet w okno popup, czego bym nie chciała.

Proszę o pomoc:

HTML

	<a class="open_pop">otworz</a>	

<div class="hover_pop">
			<span class="helper"></span>
				<div class="modal-content" style="overflow-y: initial !important">
					<div class="modal-header" style="border-bottom:1px solid #E5E5E5;">
						<div class="popupCloseButton">X</div>
						<h2>TYTUŁ</h2>
					</div>
					<div class="modal-body" style="overflow-y: scroll; max-height:86%;  margin-top: 10px; margin-bottom: 0px;">
						<p>TREŚĆ</p>
					</div>
					<div class="modal-bottom" style="border-top:1px solid #E5E5E5;position: relative;">
						<div class="popupCloseButton2">Zamknij</div>
					</div>
				</div>
		</div>

JQuery

$(document).ready(function () {

    $(".open_pop").click(function(){
       $('.hover_pop').show();
    });
    $('.popupCloseButton').click(function(){
        $('.hover_pop').hide();
    });

// hide body scroll
    $(".open_pop").click(function(){
       $('body').css('overflow','hidden');
    });

    $('.popupCloseButton').click(function(){
        $('body').css('overflow','auto');
    });
    $('.popupCloseButton2').click(function(){
        $('body').css('overflow','auto');
    });
})

Pozdrawiam, Ala

Answer 1

Div na całą szerokość i wysokość o z-index mniejszym od popupa i większym od strony z eventem  zamykakącym ;)

Comments

Nie rozumiem za bardzo jak to zrobić o czym piszesz.

Próbowałam w ten sposób:

var modal = document.getElementById('ID');

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Niby działa, ale przez to, że nadałam wcześniej brak scrollowania strony to po wyłączeniu popup scroll już w ogóle na stronie głównej się nie pojawia

---

Oprócz ukrycia modala włącz jeszcze scrolla

$('body').css('overflow','auto');

to powinien wtedy się pojawiać.

btw. wydaje mi się, że zamiast edytować style css bezpośrednio w skrypcie js lepiej jest utworzyć osobną klasę w arkuszu stylów i nadawać ją w skrypcie odpowiednim elementom.

 

Answer 2

Podbijam, może ktoś jeszcze wpadnie na jakiś pomysł