I have made modal window. It closes by clicking on X button.
But now I want to close it, if user click of modal outside area.
$("a[href='#modal']").click(function(e) {
e.preventDefault();
$("body").addClass("noscroll");
$(".modal").addClass("is-active");
$(".modal_overlay").addClass("is-active");
});
$(".modal .close").click(function(e) {
e.preventDefault();
if($(".modal").hasClass("is-active")) {
$("body").removeClass("noscroll");
$(".modal").removeClass("is-active");
$(".modal_overlay").removeClass("is-active");
}
});
Here's a solution:
function close(){
$("body").addClass("noscroll");
$(".modal").addClass("is-active");
$(".modal_overlay").addClass("is-active");
}
$("a[href='#modal']").click(function(e) {
e.preventDefault();
close();
});
$(".modal .close").click(function(e) {
e.preventDefault();
if($(".modal").hasClass("is-active")) {
close();
}
});
$(window).click(function(e) {
close();
return false;
});
$(".modal").click(function(){
return false; // prevents a click in dialog to close the modal
});
It just handles the click on the window to close the modal, while intercepting them in the modal to prevent them from hitting the previous event handler.
Related
I have a problem. Each time I click in Confirmation 'Cancel', the next time needs one more click to close dialog.
$('.boton-estado').unbind().click(function () {
$('#id_estado').val($(this).val());
$("#estados").submit(function (event) {
if (!confirm("¿Realizar cambio de estado?")) {
event.preventDefault();
event.stopPropagation();
}
});
$("#estados").submit();
});
Ideas?
Thx
Try this: put submit button handler outside the button handler
$(function(){
$('.boton-estado').unbind().click(function () {
$('#id_estado').val($(this).val());
$("#estados").submit();
});
$("#estados").submit(function (event) {
if (!confirm("¿Realizar cambio de estado?")) {
event.preventDefault();
event.stopPropagation();
}
});
});
I have a div which should be visible, whenever a button is clicked. It's like a menu. Afterwards, it should disappear (toggle), when the button is clicked again or when the user clicks somewhere else on the page (whole body).
In my current approach, the menu constantly toggles, so both functions (see below) are being triggered.
$("#b1").click(function() {
$("#menu").toggle("slide");
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
How should I improve my code, so that the menu only disappears when the button is clicked again or when the user clicks somewhere else?
Here is a fiddle.
Use $(window) to attach the event, then you can close the menu anywhere.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false;
});
$(window).click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
Check demo: https://jsfiddle.net/wru8mvxt/5/
You can use e.target and check whenever it's not the menu or the button which got clicked. Otherwise the menu closed even on the button click or on a click inside.
$("#b1").click(function() {
$("#menu").slideDown();
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
} else {
e.preventDefault();
}
});
If you want the menu to stay even on click inside, just add && !$(e.target).is("#menu") to the if condition.
Working example.
I think your code looks good.. I see one problem when you click on menu it will be hide.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false; // prevent to pass click event to body
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
$("#menu").click(function(e){
e.preventDefault();
return false;
});
Use something like this:
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
Try this.
$("#b1").click(function() {
event.stopPropagation();
$("#menu").toggle("slide");
});
$("body").click(function() {
if(!$(event.target).closest('#menu').length){
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
}
});
I think this code will solve your issue. You can use e.target property to find whether user clicked on button or outside button. When user click on button b1 it enters both b1 click event and body click event. So if in order to find where the user is clicked you can use event.target property.
Clicking the button will toggle the menu visibility.
Clicking outside the button will close the menu if it is opened.
$("#b1").click(function() {
$("#menu").toggle("slide");
$("#b1").text() == "hide menu" ? $("#b1").text("show menu") : $("#b1").text("hide menu");
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
}
else {
e.preventDefault();
}
});
Working fiddle
You have to do following changes.
$(document).ready(function() {
$("#b1").click(function(e) {
$("#menu").slideToggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#menu, #menu *')) {
$("#menu").slideUp();
}
});
});
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');
}
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