I have a modal with the following code to close it
a#modalclick.icon.icon-close.pull-left href="#mymodal"
I want to know when the x icon is clicked and the modal closed so I can do something with the link id.
My javascript is;
$('#modalclick').on('click', function(event) {
console.log('clicked')
});
but it's not recognising the modal being clicked closed...
use these events hidden.bs.modal, hide.bs.modal Docs.
JS
$('#mymodal').on('hidden.bs.modal', function(event) {
console.log('modal is being to be closed')
});
$('#mymodal').on('hide.bs.modal', function(event) {
console.log('modal hidden')
});
Have you tried using .not(':visible') ?
if ( $('#yourdiv').not(':visible') ) {
console.log('not visible');
}
Related
This question already has answers here:
How do I prevent my dropdown from closing when clicking inside it?
(3 answers)
Closed 4 years ago.
My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it?
JSFiddle
// Add open class if active
$('.sidebar-nav').find('li.dropdown.active').addClass('open');
// Open submenu if active
$('.sidebar-nav').find('li.dropdown.open ul').css("display","block");
// Change active menu
$(".sidebar-nav > li").click(function(){
$(".sidebar-nav > li").removeClass("active");
$(this).addClass("active");
});
// Add open animation
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add close animation
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
Demo: http://jsfiddle.net/wkc5md23/3/
I believe this should be a more proper solution, as stopping propagation on the click event might sometimes cause issues later on in development. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/ Instead this solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event.
The following code has been taken and edited by myself to make it work on all Bootstrap dropdowns, as it has originally been taken from here: Preventing bootstrap dropdown from closing on click I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.
$(function () {
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
'hide.bs.dropdown': function (event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});
You can disable the dropdown functionality temporarily. This is a workaround.
Example with input field inside the drop-down "menu":
//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function (e) {
// this attribute can be anything except "dropdown", you can leave it blank
$('#yourDropdownID').attr('data-toggle', 'off');
});
//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function (e) {
$('#yourDropdownID').attr('data-toggle', 'dropdown');
});
This can be used on anything that is clickable and you can define individually what items clicked can close or not close the drop-down menu.
Not close in click out side menu
$(function() {
var closeble = false;
$('body').on('click', function (e) {
if (!$(event.target).is('a.dropdown-toggle')) {
closeble = false;
}
});
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
closeble = true;
} else {
closeble = false;
}
},
'hide.bs.dropdown': function () {
return closeble;
}
});
});
I have made a nav that opens when you click at the .products link and closes if you click anywhere on the screen. But it seems that if you click on the .product link when it is already open, it will not close. How can I do this?
$('#subnav').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('.products').length ) {
$("#subnav").show();
}else if ( ! $(e.target).closest('#subnav').length ) {
$('#subnav').hide();
}
});
Demo
js
$("#subnav").hide();
$(".products").click(function (e) { //the usual behavior on click on .prducts
$("#subnav").toggle();
e.stopPropagation();
});
$("#subnav").click(function (e) { //ensures the #subnav will not hide on click on it
e.stopPropagation();
});
$(document).click(function () { //ensures the #subnav will hide on click on document
$("#subnav").hide();
});
You need a click event on the document to hide the block and a click event on the button to show the block. And in the event of the button, you need to stop the propagation of the document's event.
Like that :
$("div").hide();
$("button").bind("click",function(e){
e.stopPropagation();
$("div").toggle(200);
});
$(document).bind("click",function(){
$("div").hide(200);
});
Assuming your code looks like that :
<div></div>
<button>open</button>
See example : http://jsfiddle.net/oqgpceod/1/
Aditionnaly you may add this code to prevent the block from hiding when you click on it :
$("div").bind("click",function(e){
e.stopPropagation();
});
Fiddle: http://jsfiddle.net/r2h57jhu/
$(document).ready(function () {
$('#subnav').hide();
$(document).click(function(e) {
$('#subnav:visible').hide();
});
$('.products').click( function (e) {
$('#subnav:not(:visible)').show();
e.stopPropagation();
});
});
I am trying to bring my menu button back to its original state once you click the body or close button.
What I mean is when you click the menu button you will see that it switches to an x. Once you click the x it will switch back to the menu icon. I would like to mimic this same event once you click outside the button or the close button.
$(".gn-icon-menu").click(function() {
$(this).toggleClass("on");
});
http://jsfiddle.net/f4fjf/18/
You can add a click event on the document like this:
$(document).click(function() {
if ($(".gn-icon-menu").hasClass('on')) {
$(".gn-icon-menu").removeClass('on');
}
});
You have to stopPropagation on your .gn-icon-menu click event:
$(".gn-icon-menu").click(function(event) {
event.stopPropagation();
$(this).toggleClass("on");
});
Demo JSFiddle
Try this:
$('body').click(function(evt){
if(evt.target.class == ".gn-icon-menu")
return;
$(".gn-icon-menu").removeClass('on')
});
$(".gn-icon-menu").click(function(e) {
e.stopPropagation()
$(this).toggleClass("on");
});
Working Demo
DEMO
Javascript
$("body").not(".gn-icon-menu").click(function() {
$(".gn-icon-menu").removeClass("on");
});
$(".gn-icon-menu").click(function(e) {
e.stopPropagation();
$(this).toggleClass("on");
});
Hope it helps
I have a question concerning collapsing/expanding a footer. I have a simple basic collapse/expand script going, where when the "Open" button is clicked, the hidden footer slides up and when you click "Close" it slides back down and hides again. Now, I want to attach an instance where I can click anywhere on teh DOM when the footer is open and it will close.
This is the script:
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Thanks
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// click anywhere on teh DOM when the footer is open and it will close.
$("body:not(#footerClose)").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
});
try this one, im using jquery not selector.
Attach a click handler to the document, and do the slideUp in there. You can use the event.target to determine whether or not to perform the slideUp:
$(document).on('click', function(e) {
// Don't slideUp if #footerOpen or #footerPanel are clicked
if ($(e.target).is('#footerOpen, #footerPanel')) {
return;
}
// Do the slideUp!
$('#footerPanel').slideUp('slow');
});
Here's a fiddle
If you have other elements within your #footerPanel, the above probably won't work as the target will likely be something other than #footerPanel, the best thing to do would be to add a click handler to #footerPanel, and prevent the event from propagating and triggering the above click handler:
$('#footerPanel').on('click', function(e) {
e.stopPropagation();
});
Here's another fiddle
Try this it worked for me...
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.is("#footerPanel")){
$("#footerPanel").slideUp('slow');
}
});
I m displaying a popver inside the modal i can hide it on close but unable to hide it while clicking out side the modal. I try to hide it by on close which is fine. the code is here
$('.close, .close-button').click(function(){
$(".popover.bottom").css('display', 'none');
});
I tried to hide by clicking out side the modal but it is hide when I click inside the modal.
$("#myModal").click(function(){
if(($("#myModal").attr('aria-hidden')) == 'false'){
$(".popover.bottom").not('.modal-content').css('display', 'none');
}
});
can any one help me in this regard?
$("#myModal").click(function(){
if(!$("#myModal").attr('aria-hidden')){
$(".popover.bottom").not('.modal-content').hide();
}
});
I had a similar Issue. Could you try this instead? Replace your id/class from bootstrap.
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
For reference: http://jsfiddle.net/mattdlockyer/C5GBU/2/
I have done it using
$("#myModal").on('hidden.bs.modal', function(){
$(".popover.bottom").css('display', 'none');
});