I'm showing the user a modal/lightbox. The modal shows up and the rest of the page goes dim when the user clicks a button. Usual stuff.
However I want to do this. If the user clicks any element outside of the modal, I want the modal to go away and the page to return to normal.
How can this be done? I know I can set an onclick event for body, and then check if event target is my modal, but what if the user clicks on a link/textbox/button within the modal? In that case, target won't be the modal. How can I solve this?
Is there a way to check if the event target is contained with <div id="modal"></div>, so if it is, I won't close the modal, and if not, that means user clicked outside the modal and I can close it?
jsBin demo
$(document).mouseup(function(e){
if(e.target.id !== 'modal' ){
$('#modal').hide();
}
});
$('#modal').mouseup(function(e){
e.stopPropagation(); // prevent mouseup propagate to underneath layers
});
You could put a div under the modal that fills the entire space and attach your click handler to it.
$("body").click(function(e){
if( ! $(e.target).closest("#modal").length ){
$('#modal').hide();
}
});
demo
Another one approach:
var mouseOverModal = false;
$(document).click(function(e){
if ( ! mouseOverModal ){
// close modal
}
});
$('#modal').bind("mouseenter mouseleave", function(e){
mouseOverModal = ( "mouseenter" == e.type );
})
$('#open-modal-handler').click(function(){
// open modal
return false; // <- IMPORTANT
})
Related
I have big upload form, user can drag and drop images here. But when images are loaded, i'm showing button, which on click should link to some page. But this element instead of loading next page, opens file chose window (its parent default behaviour)
So I'm checking, if event has class, if it's true, I'm using e.preventDefault().
And this works better (I don't have image choose window on link click, but also this link will not work - every event is disabled) My question is, how i can enable linking now?
// jFiler is a parent - upload form, with event - on click it opens window for file choose - like input field.
$(document).on('click', '.jFiler', function(e) {
if ($(event.target).hasClass("jFiler-input-done-btn")) {
e.stopPropagation();
e.preventDefault();
}
});
$('.jFiler-input-done-btn').on('click',function(e) {
// Test works, but this is a link, and it cannot link to another page now...
alert ('test')
});
You break the link execution with e.stopPropagation() and e.preventDefault() in the parent click event. You have to just return true there.
$(document).on('click', '.jFiler', function(e) {
if( $(event.target).hasClass("jFiler-input-done-btn") ) {
return true;
}
});
Just redirect to the other page inside the click event you already attach :
$('.jFiler-input-done-btn').on('click',function(e) {
windows.location.href = $(this).attr('href');
});
//OR also
$('.jFiler-input-done-btn').on('click',function(e) {
e.stopPropagation();
});
Hope this helps.
Building a mobile menu and would like when the user clicks on the document, not the menu to close the menu if its open.
Problem is that when the first click is fired to open the mobile it automatically closes. I'm struggling to get this bit to work.
The code recognises the click so the window is detecting the right action. I'm just missing one final step I think.
Code is:
$('.mobile-menu-button').click(function(e) {
e.preventDefault();
$('.mobile-menu').slideToggle('slow');
});
// close on off click
$(window).click(function(e){
e.preventDefault();
e.stopPropagation();
if($('.mobile-menu').css("display") == 'block') {
$('.mobile-menu').slideToggle();
console.log('click');
}
});
Thanks
You can use event delegation. When you click on '.mobile-menu', you open it or close it, when you click somewhere else you only close it.
$(window).on('click', function(e){
e.preventDefault();
if ($(e.target).hasClass('mobile-menu-button')) {
$('.mobile-menu').slideToggle('slow');
} else {
$('.mobile-menu').css('display') === 'block' && $('.mobile-menu').slideUp();
}
});
a basic example on this fiddle: https://jsfiddle.net/6e7atrmn/2/
I have a notification dropdown similar to what stackoverflow has. So when the user request the notifications window I open and close my dropdown div using .show and .hide.
Meanwhile I also want to close it when the user clicks anywhere outside my dropdown div.
My approach was to do the following on my layout.cshtml :
$(document).on("click", onDocumentClick);
function onDocumentClick(event) {
var target = $(event.target);
if (!target.hasClass('nbr-notifications')) {
if ($('#notifications-dropdown').css('display') === 'block') {
$('#notifications-dropdown').hide();
}
}
}
My question and concern is : Is this the best way to do it? From the performance perspective? Since I am handling all clicks on my document everytime.
Couldn't you use this if you are not sure where the element would be?
$('body').on("click",".nbr-notifications", onClick)
.on('blur','.nbr-notifications',closeNotifications);
function onClick(event) {
if ($('#notifications-dropdown').css('display') === 'block') {
$('#notifications-dropdown').hide();
}
}
function closeNotifications()
{
//close it
}
Here only responding to clicks on elements with the class 'nbr-notifications' rather than hooking event handler for all clicks and check if the target is the required one.
If you want the notification to disappear after it loses focus why not just bind a focusout event specifically to that element instead of click to the entire document.
http://api.jquery.com/focusout/
$('.nbr-notifications').on('focusout',function(){
//close functionality here. something like: $(this).hide();
});
I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});
You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K
Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});
I have a div which opens when I click a menu button, I am trying to close it if the user clicks anywhere after it is open. The issue I am having is that with my code the show div and the close div when a user clicks I guess are firing at the same time for some reason. The code for the click event is below. How can I make it so they do not fire at the same time and when I open the div that does not fire the click function. Thanks!
//if user clicks and menu is open then hide menu div
$(document).click(function() {
if($("menu").hasClass("menu_closed") == false ) {
//will hide the menu div
closeMenu();
}
}
I think what you want actually is to stop propagation in the other click handler, something like:
$("your_menu_selector").bind("click", function(e){
//your code to open the menu
e.stopPropagation();
return false;
})
You might want to consider adding the event handler to close the menu in the handler that opens the menu. Have it execute only once using the one method. In the handler that opens the menu, simply check to see if it is open already and do a no-op if it is.
$('.openButton').click( function() {
var $menu = $('#menu').
if ($menu.hasClass('menu_closed')) {
$menu.removeClass('menu_closed').addClass('menu_open');
$(document).one( function() {
$menu.removeClass('menu_open').addClass('menu_closed');
});
}
});