javaScript div popup not hiding on outside click

Question

I am creating a JavaScript popup. The code is as below.

The HTML:

<div id="ac-wrapper" style='display:none'>
    <div id="popup">
        <center>
             <h2>Popup Content Here</h2>    
            <input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
        </center>
    </div>
</div>

The CSS:

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("images/pop-bg.png") repeat top left transparent;
    z-index: 1001;
}

#popup {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 18px;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    height: 361px;
    margin: 5% auto;
    position: relative;
    width: 597px;
}

The Script:

function PopUp(hideOrshow) {
    if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
    else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
    setTimeout(function () {
        PopUp('show');
    }, 0);
}

The jsFiddle Link:

http://jsfiddle.net/K9qL4/

The Issue:

I need to close this popup onClick outside. I am able to close it on click of submit inside.

What I tried to make it close onClick outside?

The Script:

function hideNow()
{
document.getElementById('ac-wrapper').style.display = 'none';
}

The HTML Code:

<div id="ac-wrapper" style='display:none' onClick="hideNow()">

What actually happened?

It closes the pop up on outside click, but also closes the pop up when I am trying to access the contents inside.

I am stuck up on this issue. Can someone guide me? Thanks.

putvande · Accepted Answer · 2014-05-19T12:00:59.363

1

You need to add some code to check if you are clicking on the wrapper. Something like this would work:

<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">

You need to add event to your function call.

And in your JS code:

function hideNow(e) {
    if (e.target.id == 'ac-wrapper') {
        document.getElementById('ac-wrapper').style.display = 'none';
    }
}

In the function you check what the event.target is (the element you actually clicked on). If the id matches 'ac-wrapper', you know you clicked on the correct element.

See Fiddle

edited May 19 '14 at 12:00

answered May 19 '14 at 11:47

putvande

15,068
3
34
50

Awesome .. Works perfectly fine. +1 - @putvande – Nitesh May 19 '14 at 11:56
Can you elaborate what you did that it worked and where was I wrong ?? – Nitesh May 19 '14 at 11:56
Got the explanation .. Thanks again .. Just one query .. can we also add a draggable to this popup ?? – Nitesh May 19 '14 at 12:05
Yeah that should be possible. But there are many forms and it sounds like a whole different question ;) – putvande May 19 '14 at 12:06
Lolz.. Yes.. I shall post it as a different question .. Thanks for the solution. Shall accept your answer. – Nitesh May 19 '14 at 12:13
Here is the new Question about draggable. http://stackoverflow.com/questions/23737536/making-a-javascript-popup-draggable - @putvande – Nitesh May 19 '14 at 12:17

score 1 · Answer 2 · answered May 19 '14 at 11:53

1

You can use the method stopPropagation() of the event.

see the fiddle : http://jsfiddle.net/xWrj9/

 $('#popup').click(function(e){    e.stopPropagation(); });

answered May 19 '14 at 11:53

Thanks Zekth, but I am not using jQuery here .. I am using pure javaScript .. Thanks for your time .. +1 for your efforts – Nitesh May 19 '14 at 11:57

javaScript div popup not hiding on outside click

2 Answers2