I was able to get an idea on how to close a modal window when clicking outside, but I am having issues to have it working when trying to have links inside the modal window.
I created a small code in Codepen to illustrate my point:
https://codepen.io/neotriz/pen/MRwLem
window.addEventListener('load', setup);
const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);
function setup() {
let modalRoot = get('modal-root');
let button = get('modal-opener');
let modal = query('.modal');
modalRoot.addEventListener('click', rootClick);
button.addEventListener('click', openModal);
modal.addEventListener('click', modalClick);
function rootClick() {
modalRoot.classList.remove('visible');
}
function openModal() {
modalRoot.classList.add('visible');
}
function modalClick(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}
remove e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();from modalClick . Thats the reason you are not able to click on inside links.
and modify the function rootClick
function rootClick(event) {
if (!(modal == event.target || modal.contains(event.target))) {
modalRoot.classList.remove('visible');
}
}
Codepen : https://codepen.io/anon/pen/ZZGwRr
Related
window.onload = function () {
document.getElementById("lin").addEventListener("click", function func1(event) {
console.log('prevent defaul stopped')
event.preventDefault()
});
}
window.onload = function () {
document.getElementById("btn").addEventListener("click", function func2(event) {
console.log(' button prevent defaul stopped')
event.preventDefault()
});
}
I'm building a website and right now I'm having an issue trying to get an if statement to read a change of state variable.
I'm trying to close my navbar menu when I click anywhere in the body, other than the navbar. However, my if statement that contains the event listener for the body will not execute because (I think) that the change of state variable that is being used for the condition (true when menu is open, false when menu is closed) is just not being read.
When I open the nav menu, the change of state variable changes to true, as it is intended to. When I close the menu using the button on the nav bar, the change of state variable changes to false, as it is intended to.
Here's my code:
"use strict";
const btnNav = document.querySelector(".nav-btn--container");
const linkContainer = document.querySelector(".link-container");
const header = document.querySelector(".header");
const sidebar = document.querySelector(".sidebar");
const bodyChildren = header.parentElement.children;
const navBtn = document.querySelector(".nav-btn");
const menu = document.querySelector(".sidebar__menu");
const body = document.querySelector(".container");
/**** change of state variables ****/
let menuIsOpen = false;
/**** functions ****/
const closeMenu = function () {
addRemoveBlur("remove");
navBtn.classList.remove("nav-btn--opened");
sidebar.classList.remove("blur");
navBtn.classList.add("nav-btn--closed");
menu.style.visibility = "hidden";
menu.style.transform = "translateX(-150%)";
menuIsOpen = false;
};
const openMenu = function () {
addRemoveBlur("add");
navBtn.classList.remove("nav-btn--closed");
navBtn.classList.add("nav-btn--opened");
menu.style.visibility = "visible";
menu.style.transform = "translateX(0%)";
menuIsOpen = true;
};
const closeMenuByBody = function (e) {
const click = e.target;
closeMenu();
};
const openCloseMenu = function () {
if (!menuIsOpen) {
openMenu();
return;
}
if (menuIsOpen) {
closeMenu();
return;
}
};
/**** this is the problem ****/
if (menuIsOpen) {
body.addEventListener("click", function (e) {
closeMenuByBody(e);
});
}
The problem is that the event listener is never initialized, as your menuIsOpen variable is always declared false.
You should switch your if statement to be contained within the click event handler, like so:
body.addEventListener("click", function (e) {
if (menuIsOpen) {
closeMenuByBody(e);
}
});
You should also consider the following changes to your openCloseMenu method (here renamed to toggleMenu):
const toggleMenu = function () {
if (menuIsOpen) {
closeMenu();
} else {
openMenu();
}
};
As you are evaluating a boolean value, there is no need to test it in two different if expressions: you check if it's true and do something if it is, or else you do something knowing that it's false.
You could also remove your closeMenuByBody method, and just call the closeMenu method from your event listener, as you aren't doing anything in it appart from that:
body.addEventListener("click", function (e) {
if (menuIsOpen) {
e.preventDefault();
closeMenu();
}
});
I am currently working on a javascript module which open and close boxes, tooltip or similar, the function works great the only problem is when I call it twice on a page where the 'boxes' classes are different the window mouseup event will be overwritten and only one of the two module instances of boxes can now be closed after opening them.
var boxRevealer = (function () {
var buttons;
var boxes;
var element;
var drp_active = false;
var boxConstruct = function (btns, bxs) {
buttons = document.querySelectorAll(btns);
boxes = document.querySelectorAll(bxs);
boxEvents();
};
var boxEvents = function () {
buttons.forEach(function (e) {
e.addEventListener("click", function (ee) {
element = document.getElementById(e.getAttribute("data-drp"));
element.classList.toggle("displayn");
drp_active = true;
});
});
window.addEventListener("mouseup", function (e) {
if (drp_active === true) {
if (!e.target.classList.contains("filt_holy")) {
boxes.forEach(function (e) {
console.log("ELEMENT");
console.log(e);
e.classList.add("displayn");
});
}
}
}, false);
};
return {
boxConstruct: boxConstruct,
boxEvents: boxEvents
};
})();
Here is how i call the module
window.addEventListener("load", function(e){
boxRevealer.boxConstruct(".head_drp_btn", ".head_drp");
boxRevealer.boxConstruct(".mkt_drp_btn", ".mkt_drp");
});
So my question is, should I always name the boxes the same, or is there a work around?
Just remove the event before adding it, I think the same event is getting called twice.
So updated code will be as follows:
// Attach an event handler to <div>
e.addEventListener("mousemove", myFunction);
// Remove the event handler from <div>
e.removeEventListener("mousemove", myFunction);
And remove the window event as well before adding it.
Can anyone tell me why the second function is not working? The first function works fine, but the subsequent click outside of the submenu does not work.
//reveal submenu, dropdown when browser is < 613px
function revealSubmenu_web() {
var sites = document.getElementById("sites");
var container = document.getElementById("menu_container");
if (window.innerWidth > 613) {
sites.classList.toggle("show_sub");
} else {
sites.classList.toggle("show_sub");
container.classList.toggle("container_height");
}
}
//close submenu when clicked outside
window.onclick = function(e) {
if (!e.target.matches('.submenu_web')) {
var myDropdown = document.getElementById("sites");
if (myDropdown.classList.contains('show_sub')) {
myDropdown.classList.remove('show_sub');
}
}
}
I am a little new to JS / jQuery and have done a hover function so when hover a link it shows a hidden DIV area but when I go to then hover over the div area shown of course it closes. I would like that if I then go into the content area won't close but stay open but then if leave that area would close?
JS:
$('.mini-cart').hover(
function () {
cartOpen();
},
function () {
cartClose();
}
);
var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");
function cartOpen() {
cartContainer.fadeIn("slow");
overlay.addClass("overlay");
}
function cartClose() {
cartContainer.fadeOut("medium");
overlay.removeClass("overlay");
}
HTML:
<a class="mini-cart">hover link</a>
<div id="cart_over" style="display:none;">testing</div>
You could introduce the usage of a flag (isCartOpen) variable which is going to control the whether the DIV should be displayed or not.
See this working JSFiddle example and find below the related code:
var isCartOpen = false;
$('.mini-cart, #cart_over').hover(
function() {
isCartOpen = true;
cartOpen();
},
function() {
isCartOpen = false;
setTimeout(cartClose, 1000); // after 1 sec
}
);
var overlay = $("#cart_slide");
var cartContainer = $("#cart_over");
function cartOpen() {
cartContainer.fadeIn("slow");
overlay.addClass("overlay");
}
function cartClose() {
if (isCartOpen)
return;
cartContainer.fadeOut("medium");
overlay.removeClass("overlay");
}
Looks like you'll need to separate your open/close functions . Look at the following:
$('.mini-cart').hover(
cartOpen();
);
// You'll need to create a close button.. ex. <div class="close-button"></div>
$(".close-button").click(function(){
cartClose();
});