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...

javascriptjqueryhtmlcss

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

javascripthtmlvue.js

How can I show a tooltip when hovering over a tab using uib-tab?

Currently facing an issue with HTML/Bootstrap. My tabs are displayed using the uib-tabset directive on Angular Bootstrap (UI Bootstrap). I am trying to implement a tooltip that appears when hovering over a tab that is disabled. Does anyone know how I can a ...

javascripthtmlcssangularjstwitter-bootstrap

Using Highmaps in a VueJs application involves passing a state to the mapOptions for customization

I'm currently struggling with passing a vuex state to mapOptions in vuejs components. Here is the code snippet: <template> <div> <highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map">&l ...

javascriptvue.jshighchartsvuex

Error: Cannot locate module: Vue not found, incorrect path specified

I am facing an issue with my webpack configuration. I have placed my webpack.config.js and node_modules in a subfolder. When attempting to run the command npm run build, I encounter the following error: ERROR in ../public/Vue/Components/Rating.vue Module n ...

javascriptwebpackvue.js

Tips for sending textarea data via AJAX with TinyMCE

Recently, I encountered an issue with submitting forms using the TinyMCE Jquery plugin. While regular input fields like text fields and select boxes submit just fine, there seems to be a glitch when it comes to submitting a textarea with TinyMCE. It requir ...

javascriptphpjqueryajax

Contrasting outcomes between calling the await method in a function and directly logging the same method

My code consists of a for loop that iterates through an array. With each iteration, I intend for the loop to extract the value from a specified webpage and then display it in the console. for (let i = 0; i < jsonObjSplit.length; i++) { console ...

javascriptnode.jsasync-awaitpuppeteer

Encountering an issue while trying to initiate a fresh React Native Project

As I work through the setup steps outlined in the React Native Documentation on my M1 MacBook Pro, I encounter a stumbling block. Despite successfully running React projects and Expo projects on this machine before, I hit a snag when trying to create a new ...

javascriptnode.jsreact-nativenpx

Can you explain the concept of an anonymous block in JavaScript ES6 to me?

Recently, I came across an article on pragmatists which discussed some interesting ES6 features. However, one concept that caught my attention was the use of an anonymous block within a function. function f() { var x = 1 let y = 2 const z = 3 { ...

javascriptecmascript-6block

How to extract information from a JavaScript object array in Node.js?

Currently, I am attempting to extract data from a JavaScript Object array by providing field names and then storing the data in an array. However, my current approach seems to be yielding incorrect results. Whenever I try to log the values stored in ' ...

javascriptjqueryarraysnode.js

Can you provide the Angular JS alternative for executing a POST request similar to this Curl command?

Trying to translate a Curl command into Angular JS code has been a challenge for me as a newcomer to AngularJS. This specific instance involves a mobile app built on the ionic framework, which utilizes Angular JS. The original curl command looks like this ...

javascriptangularjscurl

The jQuery calls fail to execute in the update panel

My update panel is set to refresh every 1 minute. Within the panel, there are two input fields. When I click on each one, a datepicker function is triggered. Here are the scripts included for the datepicker: <link rel="stylesheet" href="http://code.jq ...

javascriptjqueryasp.netdatepickerupdatepanel

What are the steps to effectively utilize <ul> for showcasing scrolling content?

I stumbled upon and found it to be a great inspiration for my project. I tried replicating the layout of the listed items on the site: .wrap { display: block; list-style: none; position: relative; padding: 0; margin: 0; border: ...

javascripthtmlcss

Creating a Javascript Regular Expression to detect both accented and non-accented variations of a given string

Is there a way to use regular expressions in JavaScript to match both accented and non-accented versions of a string? I am customizing jQuery-ui's autocomplete feature by adding bold HTML tags around words in the suggestions. Here is my code snippet: ...

javascriptjqueryregex

Stop using the jQuery POST method after receiving a message indicating that the entry already exists in the database

Is it possible to stop the jQuery process once I receive a message indicating that data already exists in the database? I need to first check the ID, and if it does not exist, then insert it into the database using $.post("process.php"). $.post("checkda ...

phpjqueryajax

Tips on scrolling down to find the text you're looking for

I attempted to scroll downwards in my application's window using the following JavaScript code: ((JavascriptExecutor) driver).executeScript("windows.scrollBy(0,500)"); Additionally, I tried to ensure a specific element is in view with this script: ...

javascriptjavaseleniumselenium-webdriverscroll

Utilize the context API to efficiently share information from the parent to both its children and sibling children

I'm currently working on displaying fetched data in a child component using the context API, but encountering an error in the browser: TypeError: render is not a function The above error occurred in the component: in AppDataList (at App.j ...

javascriptreactjs

Displaying various results using a range slider

I really need some assistance in making this range slider produce multiple outputs. I've attempted a few different options, but unfortunately, I haven't been able to figure it out. My goal is to have the text "590" display as 5.9 times the value ...

javascriptjqueryhtmlcss

Using AJAX and PHP to retrieve and store variables in a database

This is my first time attempting this and I'm feeling frustrated because I'm struggling to figure out how everything fits together. I have a function that needs to call two PHP files - one for selecting information from a database, and the other ...

phpjquerymysqlajaxmysqli

Using TinyMCE editor to handle postbacks on an ASP.NET page

I came up with this code snippet to integrate TinyMCE (a JavaScript "richtext" editor) into an ASP page. The ASP page features a textbox named "art_content", which generates a ClientID like "ctl00_hold_selectionblock_art_content". One issue I encountered ...

javascriptjqueryasp.nettinymce

There was an issue encountered while parsing the JSON data - "SyntaxError: Unexpected token . was caught."

Encountering an error in Chrome while parsing JSON data. The JSON sample can be found at this link. It is valid JSON and the server is sending the correct Content-Type value (application/json). Uncaught SyntaxError: Unexpected token . Firefox shows a sli ...

javascriptjqueryjson