Develop Reference

Problem hiding a click-triggered div when anywhere on the page is clicked while still keeping everything selectable

Say a menu is triggered when a button is clicked, now
1_ For canceling it, the user has to be able to click anywhere on the page (not only on the same button),
2_ Everything else on the page must still remain selectable throughout this process.
Here's what I've tried:
$(".dad").click(function() {
$(".son").show();
$(".mask").show();
});
$(".mask").click(function() {
$(".son").hide();
$(".mask").hide();
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>
<div class="mask"></div>
This code satisfies the first condition(the ".son" hides when anywhere on the page is clicked), but the second condition isn't met. Because when the ".son" is visible, the paragraph is not immediately selectable, unless the user does another click. Although this seems like a minor problem, sometimes it can become a little annoying, thus is a requirement. (I've also tried other ways. E.g. CSS "pointer-events: none" on the mask, but it has a different purpose, because it also cancels click events). So how could it be done? Thanks in advance.
Note: This is not solely a CSS question, I embrace any Javascript or Jquery answers too should they give easier/better solutions.

Hope it helpful...
$(".dad").click(function() {
$(".son").show();
});
$(document).click(function (e) {
var container = $(".dad");
if(!container.is(e.target) &&
container.has(e.target).length === 0) {
$(".son").hide();
}
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>

Changing the display from block to none, Problems in showing div

This is my first question here and I've tried to search for quite some time now and I haven't found any question that is the same as mine or touches the same problem.
I want to do a CSS popup that has a background-div covering the whole website and a centered div showing actual content.
My problem is that only the centered div is showing up when I'm clicking the button that is supposed to show them both. Even when I comment out the display:none - attribute in my css-file, the background div simply doesn't have any color or style attached to it. If I fill it with text, the text shows up on the website where the div is "supposed" to be if there weren't any style sheet attached to it.
I've gotten the code from coders answer in this question.
Here it is:
Script:
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
html:
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="blackground" class="black_overlay"></div>
CSS:
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Here's the fiddle-demo so you can play around as well
I've tried changing the attributes, commenting them out, making the div visible from the get go but it always seems to not show properly (while the white_content always do).
Also: the JS-fiddle is having problems showing the white content, but the black overlay is showing just fine when you remove the display:none attribute.
Thank you so much in advance for any help. Been stuck for a while now

You need to attach the jquery plugin in jsfiddle http://jsfiddle.net/dhana36/K57DH/12/
After update http://jsfiddle.net/dhana36/K57DH/20/
UPDATE:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>

Add the script before closing </body> not inside </head> Same code doesn't work when wrapped inside head
http://jsfiddle.net/K57DH/18/ edit in left panel

div popup not working

What I am doing wrong?
When you click on class divtop, it should show a div popup in the middle of the page. At that time back page should become not clickable. escape or a button in popup will close it.
<html lang="en" class=" en">
<head>
<title>My Test Popup</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.divtop
{
width: 800px;
height: 300px;
border:solid;
}
.divbottom
{
top: 400px;
}
.localmenu {
border: 1px solid black;
background: #fff;
margin-left : auto;
top: 50px; width: 300px;
padding-top: 25px;
margin-top: 100px;
height: 150px;
}
.appContent{
width: 800px;
border:solid;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.maincontent{
width: 100%;
}
</style>
</head>
<body>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
<div id="popup" style="width : 100%; height: 600px;display: none;">
<div class='localmenu'>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().css("top", "500px").animate({top: 50}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
});
});
</script>
</body>
</html>

Fiddle
I added some CSS to your #popup and it's now all in the CSS (not inline in the html). Changed also your jQuery animate to 50px, instead of just 50.
I think you have small adjustments to do to the CSS, like in .localmenu I'm not sure why you have both padding-top: 25px; margin-top: 100px;.
CSS
#popup {
position:absolute;
display: none;
float: left;
left:30%;
z-index:1;
}
#popoverlay {
position: fixed;
display:none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
jQuery
$(document).ready(function () {
$('.divtop').click(function () {
$('#popoverlay').show();
$('#popup').show().css("top", "500px").animate({
top: "50px"
}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function () {
$('#popup').hide();
$('#popoverlay').hide();
});
});
HTML
<div class="appContent">
<div class="maincontent">
<div class="divtop">Top</div>
<div class="divtop divbottom">Bottom</div>
</div>
<div id="popup">
<div class='localmenu'>Text in Div Popup
<br/>
<button id="btnHide">Close</button>
<br/>
</div>
</div>
</div>

To get it to work properly, even if there is a vertical scroll bar, you have to use position "fixed". Place popup as a direct child of body and make it's position: fixed, and width and height 100%. Place localmenu as a direct child of body as well. Working example at jsbin.
Html:
<div id="popup">
<!--// This is to stop the user from interacting with the content in the back
// and to give a visual clue about that
-->
</div>
<div class='localmenu'>
<div>
Text in Div Popup<br/>
<button id="btnHide">Close</button><br/>
</div>
</div>
<div class="appContent" >
<div class="maincontent" >
<div class="divtop" >Top</div>
<div class="divtop divbottom" >Bottom</div>
</div>
</div>
CSS:
//Use opacity to give a visual clue. Please note that this doesn't work in -all- browsers
#popup {
position: fixed;
width: 100%;
height: 100%;
display: none;
background: black;
opacity: .5;
top: 0;
left: 0;
}
//This is just to be able to center the actual menu
.localmenu {
top: 20%;
left: 0;
width: 100%;
position: fixed;
height: 150px;
display: none;
}
.localmenu > div {
border: 1px solid blue;
background: #fff;
margin-left : auto;
margin-right: auto;
width: 300px;
height: 150px;
}
Javascript: (This is mostly the same, although I removed the animate, because I don't know exactly how it works and it needs to end at 'top: 0'. As localmenu and popup are seperate, we show them seperate as well.)
$(document).ready(function() {
$('.divtop').click(function() {
$('#popup').show().animate(200);
$('.localmenu').show();
//$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('#popup').hide();
$('.localmenu').hide();
});
});

To block the div tags at the back from being clickable:
Add a div with the following style in your HTML. Im gonna call it overlay.
.overlay {
width: 100%;
height: 100%;
background-color: #000;
left: 0;
opacity: .8;
position: absolute;
top: 0;
z-index: 10000;
display: none;
}
This will essentially cover up your page when shown up.
To center your popup:
I added some extra styles to #popup and removed some from .localmenu. You were missing position: absolute and z-index, added those in. (z-index of popup must be > z-index of overlay)
#popup {
background: #fff;
position :absolute;
left : 40%;
width : 300px;
height: 600px;
height: 150px;
display: none;
z-index: 10001;
}
.localmenu
{
border: 1px solid black;
}
Then, in your JS,
In your animate method, I changed 50px to 30% to center div#popup
Added code to hide and show .overlay along with #popup.
After the changes,
$(document).ready(function () {
$('.divtop').click(function () {
$('#popup').show().css("top", "500px").animate({
top: "30%"
}, 200);
$('.overlay').show();
});
$('#btnHide').click(function () {
$('#popup,.overlay').hide();
});
});
Demo
http://jsbin.com/olasog/1
Code
http://jsbin.com/olasog/1/edit

Try this:
$(document).ready(function() {
$('.divtop').click(function() {
var div = $('.appContent');
$('.localmenu').css({'margin': '200px auto'});
$('#popup').show().css({top: "500px", position: 'absolute', width: div.width(), height: div.height()}).animate({top: 0}, 200);
$('.mainContent').css("background-color", "grey");
});
$('#btnHide').click(function() {
$('.mainContent').css("background-color", "");
$('#popup').hide();
});
});

Kendo UI - Why can't I open and close properly a window?

I've tried different methods to open my window, but so far everything fails.
My first try was to open the window when a button was clicked with a code like this based on this example:
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
var window = $('#usuariosDiv');
if (!window.data('kendoWindow')) {
window.kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close: hideUsuarios
});
} else {
window.data('kendoWindow').open();
}
hideHomeScreen();
showUsuarios();
});
onUsuariosLoad is a function that loads the content for the window from a remote html, the function makes sure to only load once the content, if it had been loaded already then it doesn't load it again, I've tested the function before trying to implement the window Kendo UI widget to make sure it works properly.
hideHomeScreen is a function that hides some element from the div that open the window.
showUsuarios is a function that shows the content for the window.
It was supposed to check if the data for a kendoWindow had been created then to open the window, else it should create it. The first time I click the button it works, but when I close the window and click again the button, the window isn't show at all (I'm talking about the window widget UI, not the contents of the usuariosDiv, I checked Firebug and the contents for usuariosDiv are still there, but the window widget UI isn't shown).
The second try I did was like this:
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
$('#usuariosDiv').kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close : hideUsuarios
});
hideHomeScreen();
showUsuarios();
});
This is similar to the first attemp but it happens the same thing: it works fine the first time, but when I close the window it fails to reopen the window when I click again the button.
My third try was based on the example Initialize Window, center, and configure button click action from this page:
var win = $("#usuariosDiv").kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
visible: false,
title: "Modal Window",
width: "65%",
close: hideUsuarios
}).data("kendoWindow");
$('#btnUsuarios').click(function (e) {
onUsuariosLoad();
var win = $("#usuariosDiv").data("kendoWindow");
win.open();
hideHomeScreen();
showUsuarios();
});
This doesn't show the window properly, instead of showing a window with the specified dimensions, it only shows a tiny dot modal window.
That's for the opening part, my problem with closing the window comes when I try to do it by an event triggered by a control on the window. I'm not talking about the close button on the upper right corner, I'm refering to any button I have displayed on the window.
For example, I tried this to close the window:
$('#btnBack').click(function (e) {
hideUsuarios();
var window = $('#usuariosDiv');
window.data('kendoWindow').close();
});
But I get the following error: Uncaught TypeError: Cannot call method 'close' of undefined. If you're asking why I don't simply rely on the default close button on the window, it's because there're procedures, that when finished, need to close the window.
This is my View:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.metro.min.css")%>" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/jquery.signalR-1.0.0-rc1.min.js")%>" type="text/javascript"></script>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3" type ="text/javascript" ></script>
<script src="<%: Url.Content("~/Scripts/index/templates.js")%>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/index/main.js")%>" type="text/javascript"></script>
<style type="text/css">
#verticalMenu {
top: 39px;
left: 0px;
}
</style>
</head>
<body onload="onPageLoad()">
<div id="canvasDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent;">
<div id="alertDiv" style="position: absolute; top: -250px; background-color: #F00; z-index: 50; opacity:1; border-top: 1px solid #FFF; border-right: 1px solid #F5F5F5; border-bottom: 1px solid #D5D5D5; border-left: 1px solid #F5F5F5">
<div id="msgDiv" style="position:absolute;left:10px; right:10px; bottom: 10px; text-align: center;width: 50%; margin: 0px auto;">Alerta Sismo Detectado</div>
<div id="btnCloseAlert" style="position: absolute; top: 0px; right: 0"><span class="k-icon k-i-close"></span></div>
</div>
<div id="homeScreenDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: white; z-index: 10; opacity:1">
</div>
<div id="usuariosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0">
</div>
<div id="sismosDiv" style="position: absolute; left: 0; width: 100%; height: 100%; background-color: white; z-index: 2; opacity:0">
<div id="leftBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 190px; height: 100%; background-color: white; z-index:20">
<div onclick="hideSismos()" style="position:absolute;height: 39px; width: 25%; left:0; top:0"><div style="position:absolute; top: 10px; bottom:10px;left:10px;right:10px"><span class="k-icon k-i-arrow-w"></span></div></div>
<div style="position:absolute;height: 39px; width: 75%; right:0; top:10px; bottom:10px; text-align:center">Sismos</div>
<ul id="verticalMenu" style="position: absolute; width: 99%; height: auto; display: block;" >
<li id="Regiones" style="height: 75px; text-align: center;">Regiones</li>
<li id="Clusters" style="height: 75px; text-align: center;">Clusters</li>
<li id="Dispositivos" style="height: 75px; top: auto; text-align: center;">Dispositivos</li>
<li id="Eventos" style="height: 75px; text-align: center;">Eventos</li>
</ul>
</div>
<div id="selectionBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:9">
<div class="k-toolbar k-grid-toolbar" style="height: 34px;">
<button id="btnAgregarEntry" class="k-button k-button-icontext k-add-button" onclick="swapToNewData(this)"><span class="k-icon k-add"></span>Agregar</button>
</div>
<div id="listView" style="background-color: transparent; position: absolute; top: 40px; left: 0px; right: 0px; width:auto; height:auto" ></div>
</div>
<div id="dataBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 330px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:8">
<div id="dataView" style="background-color: transparent; position: absolute; top: 40px; bottom:0px; left: 0px; right: 0px; width:auto; height:auto" ></div>
</div>
<div id='myMap' style="border: thin solid black; background-color: white; position: absolute; display: block; min-height: 100%; top: 0px; left: 189px; width: 88%; z-index: 20"></div>
</div>
</div>
</body>
</html>
Can anyone help me to understand what am I doing wrong?

I had a similar problem and instead of close() I suggest using destroy() and creating new window every time.

I would prefer to bind the destroy-method to the deactivate-event and use the close()-method on the window. This way, the closing-animation will be properly finished.
...
deactivate: function() {
this.destroy();
}
...

I realise this is long after the original post but the 70% scale factor is set in the window close options.
The bug seems to affect opening and closing the same window, as the window gets scaled to 70% on close but never put to 100% on open.
I worked around this by adding the following to stop it scaling it to 70% on close.
var emptyWindow = $(theWindowId).data("kendoWindow");
emptyWindow.options.animation.close.effects.zoom.properties.scale = 1;

Insted
win.open();
you use below code.
$("#usuariosDiv").data("kendoWindow").open();

This should work to close a window:
$("#btnBack").click( function (e) {
$("#usuariosDiv").data("kendoWindow").close();
});
Also you may want to look into setting animation:false; on the window open.
I remember I had some similar problems that were associated to that.
As far as your first attempt you may want to try this (added .data("kendowindow") into the first creation)
$("#btnUsuarios").click(function (e) {
onUsuariosLoad();
var window = $("#usuariosDiv");
if (!window.data("kendoWindow")) {
window.kendoWindow({
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Modal Window",
width: "65%",
close: hideUsuarios
}).data("kendoWindow");
} else {
window.data("kendoWindow").open();
}
hideHomeScreen();
showUsuarios();
});

onclick, how can I hide a <div> and show the content behind it?

How can I make this <div> hide itself when a click occurs outside of it? I would like to be able to hide it and then show the rest of the content of the page that is behind it.
<html>
<style>
.overlay
{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 80;
}
.popupContent
{
background: #fff;
padding: 5px;
border: 1px solid black;
position: fixed;
top: 100px;
left: 400px;
bottom: 365px;
right: 300px;
z-index: 81;
}​
</style>
<div id="initialPopup">
<div class="overlay"></div>
<div class="popupContent" onclick="hideInitialPopup()">
Good Morning, Please Upload Your File Today!
</div>
</div>
​
<script>
function hideInitialPopup() {
document.getElementById("initialPopup").style.display = "block";
$("popupContent").mouseup(function(){
if(! mouse_is_inside) $
}​
</script>
</html>

Use jQuery's event.target to determine if you've clicked within the box or not:
$(document).on('click',function(e) {
if (!$(e.target).closest('#my_div_id').length) {
$('#my_div_id').hide();
}
});​
http://jsfiddle.net/mblase75/PNYTX/

Usually when you use a mask with something like a popup/dialog, it's easiest just to attach a click handler to the mask itself that hides the popup/dialog when clicked.
Here is a jfiddle: http://jsfiddle.net/peterdev001/SDNUj/