Hide div when clicking anywhere outside of div

Question

CSS

    #apDiv1 {
        position:absolute;
        left:863px;
        top:201px;
        width:59px;
        height:47px;
        z-index:1;
    }

    #btftopbar {
    height:30px;
    width:auto;
    background: #005094 url('..');
    background-repeat:repeat-x;
    text-align:left;
    padding-top:4px;
    padding-top:20px;
    }
    #adsground {
    height:400px;
    margin:0 auto;
    width: 700px;
    background:#e5e5e5;
    border-bottom:2px #005094 solid;
    border-right:2px #005094 solid;
    border-left:2px #005094 solid;
    text-align:center;
    padding:4px;
    }

    #headlineatas {
    opacity:1.0;
    height:auto;
    width:auto;
    position:fixed;
    top:65px;
    left:200px;
    border-bottom:1px #005094 solid;
    border-bottom:0px blue solid;
    color:#333;
    padding:0px;
    z-index:1001;
    font-size:13px;}
    #apDiv2 {
        position:absolute;
        left:907px;
        top:208px;
        width:247px;
        height:300px;
        z-index:1;
        background-color: #999999;
    }
    #apDiv2 {
        color: #F00;
    }
    #apDiv3 {
        position:absolute;
        left:330px;
        top:216px;
        width:361px;
        height:244px;
        z-index:2;
    }

JS

function getValue()
{
    document.getElementById("headlineatas").style.display = 'none';
}

HTML

    <div id="headlineatas">
    <div id="btftopbar">
    <img align="left" style="padding-right:2px;" src="http://4.bp.blogspot.com/-vzd4PC3mEFk/T-sufsJgLxI/AAAAAAAAAN4/knJUIQkvjtE/s300/blogtariff.com.png" />
    <span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Hi ..! Like us then Close</span>

    <span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:340px;padding-right:-5px">
    <b>
    <a onclick="getValue()">x</a></b></span>
    </div>
    <div id="adsground">

    <center>
    <b><a class="KBTricks"><h3>Hi Friends Like US  </h3>  Don't Forget To Join With Our Community</a></b> 

    <center>
    <iframe src=""></iframe>
    <iframe src=""></iframe>

    <div id='close' style="float:right; overflow:hidden;font-style:bold;">
    <h1>
    <b> Like us & Close Here>>>>>>  </b></h1> </br>
    </div>

    </center></center></div></div>
    </div>

Now I have this Full HTML CSS Javascript code for If i click "X" div will be Hide I want to edit this code to If i click Outside Of div ,I want Hide that div i read lot of tutorial but i can't do that.

Please also include a jsFiddle so people can debug it. Could you debug 100 lines of code without seeing it run? — frenchie, Jul 16 '14 at 17:51

score 2 · Answer 1 · answered Jul 16 '14 at 18:20

I think the best way to accomplish this is to, using jQuery, set a click event for the element and inside the lambda function for the click event, stop the propagation so that when it gets clicked, it's parents aren't clicked.

$('div').on('click', function(e) {
  e.stopPropagation();
});

Then, create a click event for the entire body except for the one element.

$('body').not('div').on('click', function() {
  // do stuff
});

However, if you're not using jQuery, you could do this:

var elem = document.querySelector('#element');

document.body.addEventListener('click', function(e) {
  if (e.target == elem) {
    console.log("Clicked the Element");
  } else {
    console.log("Clicked something other than the Element.");
  }
});

You create a conditional statement that allows you to check if the target of the click event is equal to the element. When it is equal, you don't do anything, when it's not equal, you can hide the div or do whatever else you want.

Stefan Wittwer · Answer 2 · 2014-07-16T18:01:13.187

I added a div with ID »overlay«, that overlays all other divs except the one you want to close when clicked anywhere outside it. Then I added a little piece of JavaScript that says to close the div when clicked on that overlay. So add this to your code:

HTML

<div id="overlay"></div>

CSS

#overlay { z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%; }

JavaScript

document.getElementById('overlay').onclick = function(){ SetValue(); };

score 0 · Answer 3 · answered Jul 16 '14 at 18:07

I was once trying to do the same and this is what I used

$(document).ready(function(){
$(document).click(function(e){
    if ($(e.target).is('#headlineatas,#headlineatas *')) {
        return;
    }
    else
    {
        document.getElementById("headlineatas").style.display = 'none';
    }
});
});

score 0 · Answer 4 · answered Jul 16 '14 at 18:09

If you don't want to block interaction with your page, you can also bind a function to the body of the page. If you aren't blocking propagation of click events, all click events will propagate up to the body of the element, so you can handle removing any given div that way.

var clickFunction = function(){
    $('#divToDelete').remove();
    body.unbind('click', clickFunction);
}

//Call this when you create #divToDelete
$('body').bind('click', clickFunction);

Unbinding the function from the body after removing the div will also stop this function from executing every other time you click anything on your page.

131 · Answer 5 · 2014-07-16T18:16:58.467

-1

Simply add an onclick event for the DIV that returns false onclick, and a jquery click event, that triggers when you click on the page as follows:

HTML

<div id="btftopbar" onclick='return false;'>
<img align="left" style="padding-right:2px;" src="http://4.bp.blogspot.com/-vzd4PC3mEFk/T-sufsJgLxI/AAAAAAAAAN4/knJUIQkvjtE/s300/blogtariff.com.png" />
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">Hi ..! Like us then Close</span>

<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:340px;padding-right:-5px">
<b>
<a onclick="getValue()">x</a></b></span>
</div>

JS

$(document).click(function(){
    getValue();
});

edited Jul 16 '14 at 18:16

answered Jul 16 '14 at 17:59

131

1,363
1
12
32

This doesnt seem to do what the person asked for. Maybe I miss understood the question? – Daryl H Jul 16 '14 at 18:10
its possible I messed up what he was asking for. Sorry, I'll vote back up – Daryl H Jul 16 '14 at 18:13
I don't think this is efficient at all. You should use HellaFont's answer. – eg_dac Jul 16 '14 at 20:42
Mind your own damn business. I posted this answer as second, and it works. If it works, it shouldn't be downvoted. People should start upvoting good answers, and stop downvoting "less good" answers. Geesh, people nowaday....... – 131 Jul 16 '14 at 22:36

Hide div when clicking anywhere outside of div

5 Answers5