We Keep Coding

Close modal by clicking outside the box

Can I use simple css to close modal by clicking outside the box? I have seen examples of how to do it using jQuery/JavaScript. I have it set up right now so that it closes when clicking the 'x' and no JavaScript is being used:
<div>X</div>
And then in my css file:
.close {
opacity: 10px;
background-color: darkblue;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}

This can't be accomplished with just plain CSS.
Javascript is there to make your page dynamic and reactive, so you should be using it to listen for events and for manipulating what is shown to the user.

Rather than using CSS you could use a button that calls a Javascript function to open the modal like so:
jQuery:
<button id="modal-button" onclick="openModal();">Open Modal</button>
HTML:
<script>
function openModal()
{
$('#myModal').modal('show');
}
</script>
Using this method you will be able to click off the modal to close it.

If you can alter the html and place a hidden checkbox and an extra overlay before the modal, then yes, I have a solution for you.
HTML
<input type="checkbox" id="modal-toggle" class="modal-toggle" />
<label for="modal-toggle" class="modal-overlay"></label>
<div class="modal">
<label for="modal-toggle" class="modal-close-button">X</label>
</div>
CSS
.modal-toggle,
.modal-overlay,
.modal {
display: none;
}
.modal-toggle:checked + .modal-overlay,
.modal-toggle:checked + .modal-overlay + .modal {
display: block;
}
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.modal {
position: absolute;
/* I've used absolute here to note that the modal can't be static */
/* add other properties to position this div */
z-index: 2;
}
From w3schools.com:
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
How does it work? We have a hidden overlay and modal right after an input. When this input gets checked the overlay and modal will be shown.
The overlay and the close button are the labels of the checkbox so clicking on these will uncheck the input, thus hides the modal. You will need another label somewhere in your html which will bring up the modal of course.
You can read about the "+" css selector here.
Full list of css selectors
You can use multiple modals on the same page, just make sure every modal has its own unique id and for attribute value. The question didn't mention if the modal has to be animated on show/hide, that is possible too.

you can close the div by clicking out side
add this code to your js file or inside your <script> </script> tag
replace the ID_OF_DIV with id of the div you want to close
document.body.addEventListener("click", function() {
var element = document.getElementById("ID_OF_DIV");
if (element) {
element.style.display = "none";
}
});

jQuery blur div not in focus

EDIT: You can see my code working here: unf.edu/~n00804716/site/work.html
I am attempting to blur a section with jQuery when I open an iframe. The iframe is initially hidden, but appears as a fixed element above everything when a button is clicked. I have found one way to do this, but it requires an excessive amount of code. So, I tried to cut down a little, but can't get it to work. Here is what I have:
$('#slides iframe').hide();
$("span").click(function() {
$("#slides iframe").fadeIn(300);
});
$('#slides iframe').each(function(){
if ( $(this).css('display') == 'block')
{
$("section").css({
'filter': 'blur(15px) greyscale(80%)'
});
} else {
$("section").css({
'filter': 'blur(0px) greyscale(0%)'
});
}
});
This is how my HTML is setup:
<div id="slides">
<div id="slide-2" class="slide">
<iframe class="zoo-video"></iframe>
<section>
<span></span>
/*other content*/
</section>
</div>
</div>
CSS:
#slides iframe {
width: 90%;
margin: 0 auto;
height: 90%;
z-index: 9999;
position: absolute;
right: 0;
left: 0;
top: 5%;
bottom: 0;
}
#slides,
section {
width: 100%;
}
Also, I'm not entirely sure if the vendor prefixes are necessary. Is there a much simpler way to do this? The trick is, the iframe is a vimeo player that takes up 90% of the screen. So, I also need the iframe to close/collapse when the page is scrolled vertically or if the user clicks outside of the iframe. When it collapses, I need it the section to no longer have a blur or grayscale. Here is the code I'm using to collapse the iframe when the user clicks outside of it:
$(document).mouseup(function (e) {
var container = $("#slides iframe");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.fadeOut(230);
}
});

http://jsfiddle.net/721nma0g/
$(document).ready(function () {
var video = $("#slides iframe");
$(document).mouseup(function (e) {
if (!video.is(e.target) && !video.has(e.target).length) {
video.removeClass("visible-video");
}
});
$("button").click(function() {
video.addClass("visible-video");
});
});
Instead of doing so much with jQuery, I often just use JS to set a class. You can do so much more with CSS than you'd think. Of importance is the CSS. You had a small spelling error (US vs UK spelling) greyscale vs grayscale. But as you can see the + selector is very useful here! Select the element following .visible-video and you can target the section that you want!
iframe {
display: none; /* Hide the video initially */
width: 90%;
margin: auto 5%;
position: fixed;
z-index: 20;
top: 48px;
box-shadow: 0 4px 36px rgba(0,0,0,0.72), 0 0 8px rgba(0,0,0,0.48);
}
.visible-video {
display: block; /* show the video when the class has been set */
}
section {
margin: 24px auto;
width: 80%;
}
.visible-video + section {
-webkit-filter: blur(15px) grayscale(80%);
filter: blur(15px) grayscale(80%);
}
EDIT: I improved the CSS code of the iframe, so it'll scale better, and I included some JS that will detect if the user has clicked on the scrollbar or not. Without this addition, the iframe will also close when clicking the scrollbar.
Full screen result here: https://jsfiddle.net/721nma0g/5/embedded/result/
Edited jQuery:
if (!video.is(e.target) && !video.has(e.target).length && (e.target != $('html').get(0))) {
video.removeClass("visible-video");
}
Edited CSS:
iframe {
display: none;
max-width: 90%;
position: fixed;
z-index: 20;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 4px 36px rgba(0, 0, 0, 0.72), 0 0 8px rgba(0, 0, 0, 0.48);
}
Works great on mobile too.

How do I make a link remove a class from a div using jQuery?

Edit: I fixed my problem, apparently jQuery 2.1.4.js wasn't found. #stupidmistakesthatyouoverlook thanks to all who responded and helped! It was very useful!
The Problem
I want a link to remove a class from a div so that it will show the contents and fade-in or out depending on the situation; however, my code (shown below) isn't accomplishing that task and I don't know why? Any Ideas?
My Code
Assume that I have an index.html that includes nav.jade and about.jade. For reference, I am using Jekyll.
(nav.jade)
section.nav
ul#navList
li
a(href="#")#video-link
i.fa.fa-youtube-play
| Music Video
(about.jade)
.video-overlay.hide
.video-container
<iframe width="853" height="480" src="https://www.youtube.com/embed/EN5xqCNbf9c" frameborder="0" allowfullscreen></iframe>
a(href="#").hide-cta Close this Video
(about.sass)
.video-overlay
display: flex
justify-content: center
align-items: center
position: fixed
left: 0
right: 0
top: 0
bottom: 0
background-color: rgba(0, 0, 0, 0.5)
z-index: 50
.video-container
width: 853px
height: 480px
background-color: black
padding: 5px
.hide-cta
position: absolute
top: 80%
left: calc(50% - 85px)
text-align: center
text-decoration: none
padding: 5px 10px
color: white
border: 2px solid white
transition: all 0.3s ease-in-out
margin-top: 30px
&:hover
color: black
background: white
border: 2px solid white
.hide
display: none
(functions.js)
$(function() {//shorthand for $('document').ready(function () {}
$('#video-link').on('click', function() { //check if link was clicked
$('.video-overlay').removeClass('.hide'); //unhide the div
$('.video-overlay').fadeIn('slow'); //fade the div in
return false; //if it wasn't clicked return false
});
$('#hide-cta').on('click', function() { //check if link was clicked
$('.video-overlay').addClass('.hide'); //make the div hide itself
$('.video-overlay').fadeOut('slow'); //fade the div out
return false; //if it wasn't clicked return false
});
});

This is a common syntax error that many people stumble into. I have been guilty of it in the past as well. Do not user selectors in the addClass and removeClass function calls. Just use the class name.
So the calls should look like
$('.video-overlay').removeClass('hide'); //unhide the div
and
$('.video-overlay').addClass('hide'); //make the div hide itself
respectively.

Close a modal when the body is clicked

I have made a simple pure modal with CSS and Javascript. Here's the code:
HTML:
<button data-role="toggle-modal" data-toggle="#demo">Trigger</button>
<div class="modal-wrapper" id="demo" style="display: none">
<div class="modal">
Modal content
</div>
</div>
CSS:
.modal {
margin: 10% auto;
padding: 1em;
overflow: hidden;
width: 40%;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, .5);
background: white;
text-align: center;
}
.modal-wrapper {
z-index: 1000;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .4);
}
JS:
$('button[data-role="toggle-modal"]').click(function() {
var target = ($(this).attr('data-toggle'));
$(target).fadeIn(175);
});
$('.modal-wrapper').click(function() {
$(this).fadeOut(175);
});
You can check it out on this fiddle.
The problem is, if I click inside the modal itself, it closes, and I want to interact with the modal. Do I need CSS masking here? Or is there another solution?

You need to prevent the click event is triggered in the child element.
$('.modal-wrapper').click(function(e) {
if(e.target == e.currentTarget) {
$(this).fadeOut(175);
}
});

Use StopPropagation, try this:
$(".modal").click(function(e) {
e.stopPropagation();
});
Check the Demo Fiddle

Just check for e.target in your code and based on that, fade the dialog.
Example:
$('.modal-wrapper').click(function(e) {
if($(e.target).is('.modal-wrapper')) $(this).fadeOut(175);
});
Demo: http://jsfiddle.net/gprf6Lna/3/

Toggle needs to work only on parent div, not child div

I am simulating a pop up window that fades the background out. I do this by simply toggling a div that fills the whole screen. I would like to be able to close the pop up by clicking the outside background, but not when you click on the new content area, which is what is currently happening. My code:
JS:
function popbox() {
$('#overbox').toggle();
}
HTML:
<div class="popbox" onclick="popbox()"> Click Here </div>
<div id="overbox" onclick="popbox()">
<div id="infobox1">
<p>This is a new box</p>
<br />
<p>hello </p>
<br/><br/>
<p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
</div><!-- end infobox1 -->
</div> <!-- end overbox -->
CSS:
#overbox {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(64, 64, 64, 0.5);
z-index: 999999;
display: none;
}
#infobox1 {
margin: auto;
position: absolute;
left: 35%;
top: 20%;
height: 300px;
width: 400px;
background-color: white;
border: 1px solid red;
}
.popbox {
cursor: pointer;
color: black;
border: 1px solid gray;
padding: 5px; 10px;
background: ghostwhite;
display: inline-block;
}
JSFiddle link: http://jsfiddle.net/RrJsC/
Again, I want it to toggle only when you click the faded background or "close" (which isnt working in the jsfiddle but is on my site), but not when you click inside the white box that it contains.
After some research it seems like I might be looking for .stopPropagation(), but I haven't been able to get it to work at all.

I got it to work using jQuery's event handlers:
$('#container').on('click', '.popbox, #overbox', function(e){
$('#overbox').toggle();
});
$('#container').on('click', '#infobox1', function(e){
e.stopPropagation();
});
I replaced document with '#container' for better performance. You should wrap all your divs in <div id="container">...</div> so the the callback doesn't fire on the dom every time there is a click (even thought that callback is only called when the selector matches).
You'll also need to get rid of your onclick html attributes, because they will throw an error if that function is not defined.

I hope I understand well your problem.
If it is the case, you should have this:
<div id="overbox">
instead of this:
<div id="overbox" onclick="popbox()">
here is the updated jsfiddle