We Keep Coding

I want to load an overlay when the user closes the web browser

When a user presses the close button on the browser or tab, I want to action an overlay, wait for a second, then close. I know its not a done practice and I've stood on my soap box and cried about what is acceptable to the user and such but, they want it...
I know that the browsers close action is pretty explicit in what it can do, so where do I start?
Thanks

you could hook the onbeforeunload event, and have a overlay element hidden, then show it inside the event
overlay element
<div id="dark-overlay" style=""></div>
css
#dark-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
z-index: 1000;
display: none;
}
javascript
<script type="text/javascript">
window.onbeforeunload = function(event){
var overlayelement = document.getElementById('dark-overlay');
overlayelement.style.display = 'block';
return 'are you sure you want to quit?';
}
</script>
note this won't exactly achieve what you asked: it will show an overlay, along with a browser confirm dialog containing the text you returned.
I couldn't think of a way to wait a second before exiting, except putting a loop that exits after the defined amount of time which is terribly inefficient.

I know that the browsers close action is pretty explicit in what it can do
Correct.
It can pause while asking the user if they really want to close the window or not using a standard UI.
… and that's it.
so where do I start?
But telling your client that browsers don't provide any way to do what they want.

How to detect clicks outside of a css modal? [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 8 years ago.
Im using a very simple and clean code to render a modal in my page:
<div class="modal">I'm the Modal Window!</div>
.modal {
/* some styles to position the modal at the center of the page */
position: fixed;
top: 50%;
left: 50%;
width: 300px;
line-height: 200px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background-color: #f1c40f;
text-align: center;
/* needed styles for the overlay */
z-index: 10; /* keep on top of other elements on the page */
outline: 9999px solid rgba(0,0,0,0.5);
}
http://jsfiddle.net/c89Ls0av/
Is there a clean and reliable way to detect when somebody clicks outside of the modal?

Probably the simplest way is to bind click event to body and see if it comes from the element (e.target) which has parent (walk up the tree with closest method) .modal:
$(document).click(function(e) {
if (!$(e.target).closest('.modal').length) {
alert('click outside!');
}
});
Demo: http://jsfiddle.net/c89Ls0av/4/
By the way, overlay made with outline is an interesting idea, but it's not real overlay, as it still allows to interact with underlying page elements. Here is an example of the overlay made with div container covering entire page: http://jsfiddle.net/c89Ls0av/5/. This one will prevent page interaction when modal is visible.
And here is an example of how open/close functionality can be use together: http://jsfiddle.net/c89Ls0av/7/.

WithOut jQuery
document.addEventListener('click', function (e) {
if(e.target.className === 'modal'){
alert('clicked in');
}else {
alert('clicked out');
}
}, false);
check it out:
http://jsbin.com/totonopili/1/edit?html,css,js,output

With the help of a javascript framework this is quite easy.
Follow these steps:
Attach a click event to the document which closes or hides the modal.
Attach a separate click event to the window which stops click propagation.
Example:
$('html').click(function(){
$('.modal').hide();
});
$('.modal').click(function(e){
e.stopPropagation();
});
http://jsfiddle.net/c89Ls0av/3/
Warning! Stopping propagation can introduce strange behaviour

Dfsq answer will work fine.. but if you want something to do with dialog boxes you may have a look at jQuery ui dialog boxes. It gives you many options with dialog boxes which you can configure as per your needs.
http://jqueryui.com/dialog/

Prevent any user activity on website for specific period of time: javascript

I have made a website, something like a control panel that controls different devices connected to microcontroller (the website itself is hosted on microcontroller).
I encounter this problem: If user change state of some check box (you can think of them like on/off buttons) and immediately after that sends some other command, my system crashes. To avoid this I need to introduce delay that would disable user for clicking any other button on website for specific amount of time (in my case 5 seconds). I am using JavaScript to communicate http requests to/and from my microcontroller so I am looking for JavaScript based solution.
Hope I made myself clear and thank you for your help.

Since the post states the website itself is hosted on a micro-controller, jQuery may be inappropriate (storage constraints) for the answer. The general theme however is still the same. When a user changes an appropriate control show a modal div with a 'please wait' or some other message.
You don't mention the browser you want to target so I'm assuming a chrome or firefox version.
CSS:
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
z-index: 1001;
display: none;
}
.modal.active {
display: block;
}
HTML (Place this div somewhere in the root of body, and only once):
<div id="modal" class="modal">
<h3>Please wait...</h3>
</div>
JavaScript:
// get your elements
var element = document.getElementById("myField");
var modal = document.getElementById("modal");
// opens the modal
function openModal() {
modal.classList.add("active");
}
// closes the modal
function closeModal() {
modal.classList.remove("active");
}
// opens the modal, then closes it after a timeout period
function openTemporaryModal(var timeout) {
openModal();
setTimeout(function() {
closeModal();
}, timeout);
}
// used as an event callback
function modalForFiveSeconds() {
openTemporaryModal(5000);
}
// Attach the event callback to the element/event you want to open the modal:
element.addEventListener('change', modalForFiveSeconds);
References:
MDN: document.getElementById
MDN: element.classList
MDN: window.setTimeout
MDN: element.addEventListener

You can use below step.
Create one HTML Div
Make that div as Visible false or display:none
Set height and width for Div. make it screen.Width and screen.Height
when user click on Checkbox - set that div visible=true or display:block for 5 Seconds.
After 5 Seconds make it invisible.

First of all you will need to attached an EVENT to all of the checkboxes you have.
Something like this:
$.("input[type='checkbox']").change(disableScreen);
Create a div that would disable the screen
<div id="disablingDiv" ></div>
Then we have to create a new function called disableScreen.
function disableScreen() {
var $disablingDiv= $("#disablingDiv");
$body.addClass("disablingDiv");
window.setTimeout(function () {
$body.removeClass("disablingDiv");
}, 5000);
}
.disablingDiv
{
/* Do not display it on entry */
display: none;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
/* make it white but fully transparent */
background-color: white;
opacity:.00;
filter: alpha(opacity=00);
}
Hiding div solution was taken from "Disable all page elements with transparent div"

Disable any clicks on screen and enable it after some time or event

I'm using PhoneGap and jQuery Mobile in my app. my problem is while I navigating from page A to the page B by one click everything is OK, but when I clicking double click on page A
and passing to next screen (page B) that isnt visable to the user at that second... the second click is passed to the page B and page B try to do the action that was pressed in page A.
Any ideas how to disable any clicks on page B and activate it only after event or page loads for 100%?

Not specific to jQuery Mobile, but you can throw up a "click prevention" DIV to intercept any events you would rather not be handled.
Create a DIV with the following styles:
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
background-color: transparent;
z-index: 999999;
transform: translateZ(999999px);
display: none;
Then when you need to prevent any interaction with the app, change that div's style from display:none to display:block. Voila, instant click prevention.
Of course, don't forget to remove it from the DOM or switch it back to display:none -- otherwise your user won't be able to interact with the app anymore.
Alternatively, if you can prevent the browser's default when processing the event, that works out pretty well too. Not sure how jQuery Mobile would do that, but it's easy on something like Hammer.js ( Hammer(element, {prevent_default: true}.on("tap", event_handler); ) If possible, this is the way I'd go, since it avoids touching the DOM (which might trigger reflow). But if you can't get it working any other way, the first method should work, even if a bit ugly.

Wrapping content elements causes inline scripts to fire

I am writing a jQuery plugin. In this plugin I wrap the existing BODY contents in a DIV and hide them.
var $originalBodyContents = $('body').wrapInner('<div>').children('div').hide();
The plugin then appends its own overlay DIV to the BODY and does it's plugin magic. When the user exits the plugin removes its overlay DIV, and unwraps them.
$originalBodyContents.children().unwrap();
This is working great, as you can see in this demo:
http://jsfiddle.net/vKddB/1/
However, if there are content scripts on the page then they are all reloaded when the wrap occurs and they run their code again. This is causing a lot of unexpected behavior, as you can see in this demo:
http://jsfiddle.net/vKddB/3/
In the above demo you'll see that the "Show Alert" button shows an alert that says "hello!" when clicked. If you fire the plugin and close the plugin you'll notice that the "Show Alert" button now has two click handlers tied to it so it shows two alerts when clicked.
My plugin will not have control over the contents of the page it is running on. Is there a way I can prevent the inline scripts from re-running when I wrap the body contents in a DIV?

$('script', $('body')).remove(); before your code

If you want your plugin to work on arbitrary pages, you might want to consider an alternative approach where your overlay just covers the original contents. I believe this would be more reliable than tricks such as wrapping and hiding, moving/deleting script nodes, etc.

I just want to share my aproach in bulding an overlay maybe it will help someone.
It's a little different, the div is added on the page and does not hide the existing div elements. Maybe a little faster as the script does not search all div dom elements.
first
//create the overlay with
$('<div class="overlay" />').appendTo('body').show();
//close the overlay with
$('.overlay').remove();
//css used for overlay
.overlay
{
background-color: #363636;
background-image: url('a_nice_bg_image.png');
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 1000;
opacity: .55;
filter:alpha(opacity=55);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
}

Append the div to the body, set its position to absolute, set a high z-index and resize it to cover the whole content.
var $overlay = $('<div>')
.css({
position: 'absolute',
top: 0,
left: 0,
width: $(document).width() + 'px',
height: $(document).height() + 'px',
backgroundColor: '#f00',
'z-index': 10000
})
.appendTo('body');
Like this (your original code with minimal modifications): http://jsfiddle.net/Ya3DG/4/ :)