We Keep Coding

Close Modal window outside and have clickable links inside

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

Second js function not working

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');
}
}
}

jQuery hover function to display an overlay but closes when hover displayed content

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();
});

jQuery Cookie Toggle Issues

So because my function uses toggle() to hide and show a panel, Its really hard to actually tell when I should set a cookie and how I would integrate it.
Code:
/ Collapse ibox function
$('.collapse-link:not(.binded)').addClass("binded").click( function() {
var ibox = $(this).closest('div.ibox');
var button = $(this).find('i');
var content = ibox.find('div.ibox-content');
if($.cookie("chat") !== 'show'){
content.slideUp(200);
$.cookie("chat", "hide");
}
button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
ibox.toggleClass('').toggleClass('border-bottom');
setTimeout(function () {
ibox.resize();
ibox.find('[id^=map-]').resize();
}, 50);
});
I have no idea how to implement the $.cookie("chat") section.

Changing The slider Effect (JS/jQuery) to Slices Effect

Hi everyone i have site I'm designing, but i need a effect to be change in the slider to getting sliced effect.
Current code & Site:
http://www.summerskymusic.net
// options
var accordion = $(this);
var items = accordion.find(':has('+options.slider+')');
items.each(function(){
var item = $(this);
var opener = item.find(options.opener);
var slider = item.find(options.slider);
opener.bind(options.event, function(e){
if(!slider.is(':animated')) {
if(item.hasClass(options.activeClass)) {
if(options.collapsible) {
slider.slideUp(options.animSpeed, function(){
hideSlide(slider);
item.removeClass(options.activeClass);
});
}
} else {
// show active
var levelItems = item.siblings('.'+options.activeClass);
var sliderElements = levelItems.find(options.slider);
item.addClass(options.activeClass);
showSlide(slider).hide().slideDown(options.animSpeed);
// collapse others
sliderElements.slideUp(options.animSpeed, function(){
levelItems.removeClass(options.activeClass);
hideSlide(sliderElements);
});
}
}
e.preventDefault();
});
if(item.hasClass(options.activeClass)) showSlide(slider); else hideSlide(slider);
});
});
};
Example of What i want to achieve site:
http://tympanus.net/Development/Slicebox/
Thank you.