Clicking outside the div will cause the div to be hidden

Question

Clicking outside the div will cause the div to be hidden

Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button.

<a class="close-up" href="#" onclick="popup('popUpDiv')" >X</a>

The div structure is as follows:

<div id="blanket" style="display:none;"><a class="close-up" href="#" onclick="popup('popUpDiv')" >X</a></div>
<div id="popUpDiv" style="display:none;">  <div class="main-navBar">kfbkasfkafkja</div> </div>

If anyone can assist with making the pop-up hide when clicking outside the div, it would be greatly appreciated. Thanks in advance...

javascript jquery html css

Answer 1

Answer №1

Check out this solution:

$(document).mouseup(function (event)
{
    var box = $("#popupContainer");

    if (!box.is(event.target) && box.has(event.target).length === 0) 
    {
        box.hide();
    }
});

Answer 2

Check out this solution:

$(document).mouseup(function (event)
{
    var box = $("#popupContainer");

    if (!box.is(event.target) && box.has(event.target).length === 0) 
    {
        box.hide();
    }
});

Answer 3

Answer №2

I have created an example using jQuery that utilizes a different approach. Instead of monitoring everything outside of a div, it adds a covering and waits for the user to interact with it by clicking. This concept is reminiscent of Bootstrap's modals.

$('#open-popup').click(function() {
  $('#popup').show();
});

$('.popup_wrap .blanket').click(function() {
  $(this).parent().fadeOut(100);
});

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.popup_wrap{
  display: none;
}
.popup_wrap,
.blanket {
  height: 100%;
  width: 100%;
  position: absolute;
}
.blanket {
  z-index: 1000;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup {
  z-index: 1001;
  display: inline-block;
  position: absolute;
  background-color: #fff;
  width: 50%;
  margin: 50px 25% 0 25%;
  padding: 5px;
}
.fake-link{
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='popup' class='popup_wrap'>
  <div class='popup'>
    Some text...
  </div>
  <div class='blanket'></div>
</div>

<span id='open-popup' class='fake-link'>Open Popup</span>

Answer 4

I have created an example using jQuery that utilizes a different approach. Instead of monitoring everything outside of a div, it adds a covering and waits for the user to interact with it by clicking. This concept is reminiscent of Bootstrap's modals.

$('#open-popup').click(function() {
  $('#popup').show();
});

$('.popup_wrap .blanket').click(function() {
  $(this).parent().fadeOut(100);
});

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.popup_wrap{
  display: none;
}
.popup_wrap,
.blanket {
  height: 100%;
  width: 100%;
  position: absolute;
}
.blanket {
  z-index: 1000;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup {
  z-index: 1001;
  display: inline-block;
  position: absolute;
  background-color: #fff;
  width: 50%;
  margin: 50px 25% 0 25%;
  padding: 5px;
}
.fake-link{
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='popup' class='popup_wrap'>
  <div class='popup'>
    Some text...
  </div>
  <div class='blanket'></div>
</div>

<span id='open-popup' class='fake-link'>Open Popup</span>

Clicking outside the div will cause the div to be hidden

Answer №1

Answer №2

Similar questions

Unspecified variable in AngularJS data binding with Onsen UI

Bringing in More Blog Posts with VueJS

The ASP.NET MVC3 form collection registers as 0 when performing a jQuery ajax post

Guide on adding pictures to an ExpressJS server

One click activates the countdown timer, while a second click on the same button pauses it

I am looking for a way to display or conceal text depending on the presence of an image

The situation where a Javascript switch case continues to fall through to the default case even when a 'break' statement

Regular expression patterns for authenticating and verifying passwords

Tips for moving a title sideways and adjusting the bottom section by x pixels

Seeking assistance with downloading a collection of images as a zipped file using AngularJS

When text with delimiters is pasted into a Vuetify combobox, why aren't the chips separated correctly by the delimiters?

Using AngularJS, you can easily preselect an option in a select menu that is populated using ng-options

React-app size has grown larger post-deployment

Is there a way to use a media query on a div element to check for the presence of a scroll bar?

Tips for incorporating a spinner during content loading within AngularJS

React does not allow objects as child elements. Instead, render a collection of children by using an array

NextJS getStaticProps failing to pass fetched data to the page component

Node.js tutorial: Building routes with regex and implementing redirects

Obtain abbreviated names for the days of the week starting from Monday to Sunday using JavaScript

Creating a personalized .hasError condition in Angular 4