We Keep Coding

how to close a jquery popup when i click evrywhere except the popup it self [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 2 years ago.
can anyone help me so slove my problem
it's i made this jquery popup
we have the popup "a" ,"b" ,"c" and "d"
when i open a i want when i click everywhere i close the a but in my case when i click in "b" or "c"or "d" it open them
i want when the popup it opened when i click evrywhere except the poupup it close it
please help me and thank you
here is my code
$('.open').click(function() {
var box = $('#' + $(this).attr('data-tab-id'));
var visibleBoxes = $('.popup:visible')
if (visibleBoxes.length > 0) {
$('.popup:visible').fadeIn(400);
}
box.fadeIn(400);
});
$('.close').click(function() {
$(".popup").fadeOut(400);
});
$(document).click(function(event) {
var $target = $(event.target);
if (!$target.closest('.popup,.open').length &&
$('.popup').is(":visible")) {
$(".popup").fadeOut(400);
}
});
.popup {
margin-top: 40px !important;
margin-left: 50px !important;
width: 65%;
display: none;
overflow: hidden;
background-color: red;
border-radius: 5px;
z-index: 99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-tab-id="test1" class="open">aaaaaaaaaaaa</a>
<a data-tab-id="test2" class="open">bbbbbbbbbbbb</a>
<a data-tab-id="test3" class="open">cccccccccccc</a>
<a data-tab-id="test4" class="open">dddddddddddd</a>
<div id="test1" class="popup">
<a data-tab-id="test1" class="close">x</a>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="test2" class="popup">
<a data-tab-id="test2" class="close"><i class="fas fa-times"></i></a>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
<div id="test3" class="popup">
<a data-tab-id="test3" class="close"><i class="fas fa-times"></i></a>
<p>cccccccccccccccccccccccccccccccccccccc</p>
</div>
<div id="test4" class="popup">
<a data-tab-id="test4" class="close"><i class="fas fa-times"></i></a>
<p>dddddddddddddddddddddddddddddddddddddd</p>
</div>

I reworked your $('.open').click() handler here.
Your have 3 cases:
1: There is a .popup visible and the click was made to open another. So you have to first fadeout the opened one and then (in the fadeout callback) open the new one.
2: There is a .popup visible and the click was made to open the same that is already opened. So just do nothing.
3: No .popup is visible. So just open the .popup.
$('.open').click(function(e) {
var box = $('#' + $(this).attr('data-tab-id'));
var visibleBoxes = $('.popup:visible')
if (visibleBoxes.length && visibleBoxes[0].id !== box[0].id) {
visibleBoxes.fadeOut(400,function(){
console.log("case 1")
box.fadeIn(400);
})
}else if (visibleBoxes.length && visibleBoxes[0].id === box[0].id) {
console.log("case 2")
// do nothing!
}else{
console.log("case 3")
box.fadeIn(400);
}
});
$('.close').click(function() {
$(".popup").fadeOut(400);
});
$(document).click(function(event) {
var $target = $(event.target);
if (!$target.closest('.popup,.open').length &&
$('.popup').is(":visible")) {
$(".popup").fadeOut(400);
}
});
.popup {
margin-top: 40px !important;
margin-left: 50px !important;
width: 65%;
display: none;
overflow: hidden;
background-color: red;
border-radius: 5px;
z-index: 99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a data-tab-id="test1" class="open">aaaaaaaaaaaa</a>
<a data-tab-id="test2" class="open">bbbbbbbbbbbb</a>
<a data-tab-id="test3" class="open">cccccccccccc</a>
<a data-tab-id="test4" class="open">dddddddddddd</a>
<div id="test1" class="popup">
<a data-tab-id="test1" class="close">x</a>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="test2" class="popup">
<a data-tab-id="test2" class="close"><i class="fas fa-times"></i></a>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
<div id="test3" class="popup">
<a data-tab-id="test3" class="close"><i class="fas fa-times"></i></a>
<p>cccccccccccccccccccccccccccccccccccccc</p>
</div>
<div id="test4" class="popup">
<a data-tab-id="test4" class="close"><i class="fas fa-times"></i></a>
<p>dddddddddddddddddddddddddddddddddddddd</p>
</div>

JS code to show / hide all parent / child divs on a page

I have a simple bit of JS used to show / hide DIVs:
function HideShow(e, itm_id) {
var tbl = document.getElementById(itm_id);
if (tbl.style.display == ""){
e.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
tbl.style.display = "none"; }
else {
e.innerHTML = "<i class='fa fa-minus' aria-hidden='true'></i>";
tbl.style.display = ""; }
}
This is a working example of the code on Codepen: Show Hide Divs without jQuery
This is an example of one section:
<div id="activities" style="margin-bottom:50px;">
<div style="color: #000; background: #eee; border-bottom:1px solid #ccc; padding:5px;">
<h1 class="heading"><i class='fa fa-minus' aria-hidden='true'></i> Activities <span style="color:#ccc;"></span></h1>
</div>
<div id="parent_activities" style="background: #fff; padding:20px;">
<div id="activities__award-medal" style="background: #fff; padding-left:10px; background:#f1f1f1; border-top:1px solid #fff; font-size:30px;"><i class='fa fa-minus' aria-hidden='true'></i> award-medal <span style="color:#ccc;"></span></div>
<div id="child_award-medal" style="background: #fff; padding:20px;">
<ul class="gallery grid">
<li>
<a href="#">
<img title="military medal - 🎖️" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f396.svg" style="width:64x; height:64px" role="presentation">
</a>
</li>
</ul>
</div>
<div id="activities__event" style="background: #fff; padding-left:10px; background:#f1f1f1; border-top:1px solid #fff; font-size:30px;"><i class='fa fa-minus' aria-hidden='true'></i> event <span style="color:#ccc;"></span></div>
<div id="child_event" style="background: #fff; padding:20px;">
<ul class="gallery grid">
<li>
<a href="#">
<img title="jack-o-lantern - 🎃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f383.svg" style="width:64x; height:64px" role="presentation">
</a>
</li>
</ul>
</div>
</div>
</div>
The top level example has an id of parent_activities and then there are two child values:
child_award-medal
child_event
I'd like to work out how to add two links:
A link to toggle the HideShow function for the parents so that all divs with an ID starting with parent_ are shown / hidden
A link to toggle the HideShow function for the children so that all divs with an ID starting with child_ are shown / hidden
I'm not sure how I'd go about that though.
Any advice much appreciated. Thanks

Note: this isn't a fully complete solution. The intention is to assist you in the parts that are giving you pause.
Try not to embed JavaScript in your HTML body; it's unnecessary markup and makes it difficult to track down and debug errors. I did not change your existing calls, but demonstrate how it can be done by using addEventListener with the newer code
You can target your elements using document.querySelectorAll and looking for the prefix you're interested in (e.g., parent_, child_). Which prefixes to use have been added to the links in the data-selector attributes
because the toggling action is not going to another page, these should be buttons or spans
to hide elements, you can use the Bootstrap display classes, as I have used d-none which stands for display none. The Bootstrap library provides these to make it especially easier for responsive layouts
many of your inline-CSS should be in classes, this is to both reduce your markup and make it more organized
// So forEach can be used on 'querySelectorAll' and 'getElementsByClassName' collections
HTMLCollection.prototype.forEach = NodeList.prototype.forEach = Array.prototype.forEach;
function HideShow(e, itm_id) {
var tbl = document.getElementById(itm_id);
if (tbl.style.display == "") {
e.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
tbl.style.display = "none";
} else {
e.innerHTML = "<i class='fa fa-minus' aria-hidden='true'></i>";
tbl.style.display = "";
}
}
// -----------------------------------------------------------
// NEW Code
// New toggle links
let toggles = document.getElementsByClassName('toggler');
// Attach click event
toggles.forEach(link => link.addEventListener('click', fnToggleElement))
// Event handler definition
function fnToggleElement() {
let elements = document.querySelectorAll(`[id^="${this.dataset.selector}"]`)
let className = 'd-none'
elements.forEach(el => {
let fas = el.parentElement.closest('.item,.sub-container,.menu-container').querySelectorAll('.fa')
if (el.classList.contains(className)) {
el.classList.remove(className)
fas.forEach(fa => {
fa.classList.remove('fa-plus')
fa.classList.add('fa-minus')
})
} else {
el.classList.add(className)
fas.forEach(fa => {
fa.classList.remove('fa-minus')
fa.classList.add('fa-plus')
})
}
})
}
.menu-container {
margin-bottom: 50px;
}
.sub-container {
padding: 20px;
}
.heading {
color: #000;
background: #eee;
border-bottom: 1px solid #ccc;
padding: 5px;
}
.indent {
background: #fff;
padding: 20px;
}
.icon {
width: 64px;
height: 64px;
}
.item {
background: #fff;
padding-left: 10px;
background: #f1f1f1;
border-top: 1px solid #fff;
font-size: 30px;
}
.toggler {
cursor: pointer;
display: inline-block;
}
.gallery {
width: 100%;
*width: 99.94877049180327%;
margin: 0;
padding: 0;
}
.gallery.grid li {
margin: 2px 5px;
}
.gallery.grid li {
margin: 2px 5px;
display: block;
}
.gallery.grid li:hover {
background: #ccc;
}
.gallery.grid li {
display: inline-block;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #eee;
padding: 6px;
position: relative;
-moz-box-sizing: border-box;
border-radius: 3px 3px 3px 3px;
background: #fff;
}
.gallery a {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm"><span class="toggler btn-link" data-selector="parent_">Toggle Parents</span></div>
<div class="col-sm"><span class="toggler btn-link" data-selector="child_">Toggle Children</span></div>
</div>
</div>
<div class="container-fluid">
<div id="activities" class="menu-container">
<h1 class="heading">
<a href="javascript:;" onclick="HideShow(this,'parent_activities')">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> Activities
<span style="color:#ccc;"></span>
</h1>
<div id="parent_activities" class="sub-container">
<div id="activities__award-medal" class="item">
<a href="javascript:;" onclick="HideShow(this,'child_award-medal')">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> award-medal
<span style="color:#ccc;"></span>
</div>
<div id="child_award-medal" class="indent">
<ul class="gallery grid">
<li>
<a href="# ">
<img title="military medal - 🎖️" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f396.svg " class="icon" role="presentation">
</a>
</li>
</ul>
</div>
<div id="activities__event " class="item">
<a href="javascript:; " onclick="HideShow(this, 'child_event') ">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> event
<span style="color:#ccc; "></span>
</div>
<div id="child_event " class="indent">
<ul class="gallery grid ">
<li>
<a href="# ">
<img title="jack-o-lantern - 🎃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f383.svg" class="icon" role="presentation">
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="animals-nature" class="menu-container">
<h1 class="heading"><i class='fa fa-minus' aria-hidden='true'></i> Animals & Nature <span style="color:#ccc;"></span></h1>
<div id="parent_animals-nature" class="sub-container">
<div id="animals-nature__animal-amphibian " class="item ">
<a href="javascript:;" onclick="HideShow(this, 'child_animal-amphibian')">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> animal-amphibian
<span style="color:#ccc;"></span>
</div>
<div id="child_animal-amphibian" class="indent">
<ul class="gallery grid">
<li>
<a href="# ">
<img title="frog face - 🐸 " src="https://cdn.jsdelivr.net/emojione/assets/svg/1f438.svg " style="width:64x; height:64px " role="presentation ">
</a>
</li>
</ul>
</div>
<div id="animals-nature__animal-bird " class="item">
<a href="javascript:;" onclick="HideShow(this, 'child_animal-bird')">
<i class='fa fa-minus' aria-hidden='true'></i>
</a> animal-bird
<span style="color:#ccc;"></span>
</div>
<div id="child_animal-bird" class="indent">
<ul class="gallery grid">
<li>
<a href="# ">
<img title="turkey - 🦃 " src="https://cdn.jsdelivr.net/emojione/assets/svg/1f983.svg " style="width:64x; height:64px " role="presentation ">
</a>
</li>
</ul>
</div>
</div>
</div>

Try the following selector and apply:
document.querySelectorAll('[id^="child_"]')
See the below snippet for an example:
function toggleIdStartingWith( prefix = 'parent_' ){
// Select all IDs starting with prefix and turn this NodeList into an array
// so we can loop through it easily later.
var all = [...document.querySelectorAll(`[id^="${prefix}"]`)];
// Determine whether we want to turn them on or off by
// checking the first element. You might want to also check
// if any elements are found at all before doing this.
var hidden = all[ 0 ].style.display === 'none';
// Apply the display style to all.
all.forEach(element => {
element.style.display = hidden ? '' : 'none';
});
// Return the inverted hidden value, which is what we applied.
// Useful if you want to toggle stuff, and then see what the result
// was in the code that called the function.
return !hidden;
}
// For testing purposes I am hooking two buttons up for testing this.
document.getElementById('hideshow_parents').addEventListener( 'click', event => {
event.preventDefault()
event.target.textContent = toggleIdStartingWith( 'parent_' )
? 'Show all Parents'
: 'Hide all Parents'
})
document.getElementById('hideshow_children').addEventListener( 'click', event => {
event.preventDefault()
event.target.textContent = toggleIdStartingWith( 'child_' )
? 'Show all Children'
: 'Hide all Children'
})
<div id="parent_1">Parent</div>
<div id="child_1">Child</div>
<div id="parent_2">Parent</div>
<div id="child_2">Child</div>
<div id="parent_3">Parent</div>
<div id="child_3">Child</div>
<div id="parent_4">Parent</div>
<div id="child_4">Child</div>
<div id="parent_5">Parent</div>
<div id="child_5">Child</div>
<button id="hideshow_parents">Hide/Show Parents</button>
<button id="hideshow_children">Hide/Show Children</button>
As you asked in the comment, switching the classes depending on the toggle state is easy too. I personally think you shouldn't mix html and interactivity, so I am going to use addEventListener in my example:
function toggleIdStartingWith( prefix = 'parent_' ){
var all = [...document.querySelectorAll(`[id^="${prefix}"]`)];
var hidden = all[ 0 ].style.display === 'none';
all.forEach(element => {
element.style.display = hidden ? '' : 'none';
});
return !hidden;
}
document.querySelector('h1').addEventListener( 'click', event => {
event.preventDefault()
if( toggleIdStartingWith( 'parent_' ) ){
event.target.textContent = 'Show';
event.target.classList.remove( 'fa-minus' )
event.target.classList.add( 'fa-plus' )
} else {
event.target.textContent = 'Hide';
event.target.classList.add( 'fa-minus' )
event.target.classList.remove( 'fa-plus' )
}
})
.fa-minus:before { content: '-'; }
.fa-plus:before { content: '+'; }
<div id="parent_1">Parent</div>
<div id="parent_2">Parent</div>
<div id="parent_3">Parent</div>
<div id="parent_4">Parent</div>
<div id="parent_5">Parent</div>
<h1 class="fa-minus">Hide</h1>
If you are insistent on getting it as an onclick in your html, just wrap it in a function:
function toggle( target, prefix ){
if( toggleIdStartingWith( prefix ) ){
target.textContent = 'Show';
target.classList.remove( 'fa-minus' )
target.classList.add( 'fa-plus' )
} else {
target.textContent = 'Hide';
target.classList.add( 'fa-minus' )
target.classList.remove( 'fa-plus' )
}
}
And call it as such:
<h1 onclick="toggle( this, 'parent_); return false;'"></h1>
Also, just so you know, it might be good to return false if you are going to use onclick handlers in HTML to prevent the default events from occuring. Then you can just leave your link set to # instead of the ugly javascript:;.

You should use querySelectorAll() to select "IDs starting with...". This can be done like document.querySelectorAll('[id^="start_"]') and then you iterate through the elements applying the style to hide or show.
Check out this fiddle: https://jsfiddle.net/1c38dezk/

You should use querySelectorAll() to select "IDs starting with...".
Have a nice day

click function does not working with ng-if

If i use like following,I got what i need.. Here is the code.
<style>
.moreMenu {
position: absolute;
right: 0px;
z-index: 10;
padding: 10px;
color: #666;
border-radius: 0 0 0 4px;
background: #FFF;
display: none;
border-top: 1px solid #DDD;
}
</style>
<i class="fa fa-ellipsis-v tbButton otherOptions rightSide" aria-hidden="true"></i>
<div class="moreMenu">
heloo
</div>
<script>
$(".otherOptions").click(function () {
$(".moreMenu").slideToggle("fast");
});
</script>
But if i use ng-if condition,
<i class="fa fa-ellipsis-v tbButton otherOptions rightSide" aria-hidden="true" ng-if="member==''"></i>
click function is not working.

I solved the issue..
<i class="fa fa-ellipsis-v tbButton otherOptions rightSide" aria-hidden="true" ng-if=members==''" ng-click="mymore()"></i>
// controller
$scope.mymore = function(){
$(".moreMenu").slideToggle("fast");
}
Thanks all for the informations...

It would be better to use ng-click but if you need to use jQuery's click event, you can add a filtered click event to the body:
$('body').on('click', '.otherOptions', function() {
$('.moreMenu').slideToggle('fast');
});
this will add an event handler on the body but will only trigger if the event bubbles up from the otherOptions element. This is an approach to handling dynamic content with jQuery events

#athi is your answer is a proper answer. But as per the question I have answered here use ng-show instead of ng-if.
angular.module("a",[]).controller("ac",function($scope){
});
.otherOptions
{
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="a" ng-controller="ac">
<input class="otherOptions" type="button" value="hello" ng-click="mymore()" ng-show=true>
<div class="moreMenu">
heloodfg
</div>
</div>
<script>
$(".otherOptions").click(function () {
$(".moreMenu").slideToggle("fast");
});
</script>

Why does my button cannot disable overflow-y:hidden?

I'm trying to achieve that my button will be responsive. In precise, on first click when menu opens it darkens the entire screen and highlight the menu, as well as overflow-y:hiddenstarts working since my goal is to make sure when menu opens it won't have any scroll. There when the main issue starts to appear, overflow hidden takes place and I cannot switch off when I click on menu button again.
How to achieve this ?
my previous jquery:
$("#button").click(function(){
$('.slide').fadeToggle(500);
$('.darklayer').toggleClass('active');
$('body').css({'overflow-y': 'hidden'});
});
here is my new jquery:
$("#button").click(function(){
var $dark = $('.darklayer');
$('.slide').fadeToggle(500);
($dark).toggleClass('active');
if($dark.is(':active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').off('click');
}
}});
My HTML:
<div class="darklayer"></div>
<header id="main_menu">
<div id="menu">
<ul class="slide">
<li>Поиск строения</li>
<li>Оплатить ком услуги</li>
<li><a href=#>Обратиться за помощью</a></li>
<li><a href=#>Управляющая компания</a></li>
<li>Обратиться в Акимат</li>
<li><a href=#>Объявления</a></li>
<li>Информация о строении</li>
<li><a href=#>Обсуждения</a></li>
<li><a href=#>Помощь</a></li>
</ul>
</div>
<section id="main_header">
<div class="left_header">
<img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;">
<p class="text_ru">ru</p>
</div>
<div class="right_header">
<img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; ">
<img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
<img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
</div>
</section>
</header>

try this: user hasClass as shown below
$("#button").click(function(){
var $dark = $('.darklayer');
$('.slide').fadeToggle(500);
$dark.toggleClass('active');
if($dark.hasClass('active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').off('click');
}
}});

I think your problem in if statement you can use
if($dark.hasClass('active'))
instead of
if($dark.is(':active'))

Can you try this?
if($dark.is(':active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').css({'overflow-y': 'visible'});
}

Unable to make button show or hide depending on whether another element has content

So this is probably a simple question. But I have to ask because it's not doing what I want.
Here is the button JavaScript:
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}
});
The button is shown if there is content in the div. But I would like it to hide again if the div has no content.
I tried:
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}
if ($(".saved-items").html().length < 0) {
$('.btn-01').hide();
}
});
Here is the HTML when an item is added:
<div class="col-sm-2">
<div class="saved-items"><h4>Items:</h4>
<ul>
<li><i class="fa fa-anchor" aria-hidden="true" style="color:#f60;margin-right:10px;"></i>RAW</li>
</ul>
<script>
$(document).ready(function(){
$('.btn-01').toggle($(".saved-items").html().trim().length > 0);
});
</script>
</div>
</div>
<div class="col-sm-2">
<a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div style="display: block;" class="btn-01">Check Out</div></a>
</div>
</div>
And this is the HTML without any items saved:
<div class="col-sm-2">
<div class="saved-items">
<h4>Items:</h4>
</div>
</div>
<div class="col-sm-2">
<a class="fancybox my-subject" href="#contact-formulier" value="Item X"><div class="btn-01">Check Out</div></a>
</div>
But no go. Here is the CSS of btn-01:
.btn-01 {
background: #f60;
color: #fff;
border-radius: 2px !important;
padding: 5px;
text-align: center;
margin: 40px auto 0px auto;
width: 90%;
display: none;
border:none;
}

You can use toggle() to achieve this:
$('.btn-01').toggle($(".saved-items").html().trim().length > 0);
Working example

length of string is zero or greater than zero..can't be less than zero.
$(document).ready(function(){
if ($(".saved-items").html().length > 0) {
$('.btn-01').show();
}else{
$('.btn-01').hide();
}
});
please check https://jsfiddle.net/Shilpi/uhfruo1a/2/