CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TKP
TKP

Reputation: 453

Click a button to show, elsewhere to hide

I looked at similar questions here but non of them really got me anywhere.

So my setup is something like this :

<body>
  ...some code
  <button id="button" onClick="showPopup()">click me!</button> 
  <div id="popup">
    ...stuff
  </div>

  ..some more code

</body>

for my css I have

#popup{
  z-index:2;
  ...other styling
}

while everything else is z-index 1

and javascript 

$("#popup").hide();   //default
function showPopup(){
   $("#popup").show();
}

I want the popup to show when the button is clicked, and hide when anywhere else is clicked.

$(document).click(function (e){$("#popup").hide();}

This won't work because popup is part of the document so when the button is clicked, it shows then hides immediately. I also tried adding class and hiding if hasClass but didn't work. Also the fact that z-index is different has something to do with it?

Upvotes: 1

Views: 1996

Answers (4)

TKP
TKP

Reputation: 453

All valid answers and makes sense but none of them worked for me. Seemed like 

$(document).click(function (e){
    $("#popup").hide();
    alert("test");
});

never works, doesn't hide or alert me. I think it's something to do with the environment I am working in (Phonegap application)

I ended up adding a button that you click to close it.

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Add one more handler on popup to stop event bubbling, so click event won't reach document if occurred within popup. Also don't use inline onclick handler since you have jQuery for more unobtrusive approach:

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

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

$(document).click(function (e){
    $("#popup").hide();
});

Check the demo below.

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

$(document).click(function (e){
    $("#popup").hide();
});

$('#popup').click(function(e) {
    e.stopPropagation();
});
#popup{
  z-index:2;
  display: none;
  background: #EEE; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">click me!</button>
<div id="popup">...stuff</div>

Upvotes: 1

ntgCleaner
ntgCleaner

Reputation: 5985

I would probably write it more in your javascript and leave the onClick= out of it. That's just my personal preference.

Here's how I would approach it:

$(document).on('click', '#button', function(){
    $('#popup').show();
});
$(document).not('#button').on('click', function(){
    $('#popup').hide();
});

If you're making this act like a modal, I would suggest making your #popup fixed position on the screen and 100% width and height, then add a container inside of popup that you can style to look like whatever modal you want. Then, when you click on #popup cover, it will hide it.

Upvotes: 0

adeneo
adeneo

Reputation: 318172

Remove the inline event handler and do

$("#popup").hide();

$(document).on('click', function(e) {

    if ( $(e.target).closest('#button, #popup').length ) {
        $('#popup').show();
    } else if ( $('#popup').is(':visible') ) {
        $('#popup').hide();
    }

});

FIDDLE

Upvotes: 2

Related Questions