Create alert pop-up with blank background screen [duplicate]

Create alert pop-up with blank background screen [duplicate] - javascript

This question already has answers here:
Why don't my alert message and background color change execute simultaneously?
(3 answers)
Closed 3 years ago.
I need to display an alert box and at the same time cover what is on my HTML page. Basically, I'd like to have a blank or white background when my alert pop-up appears. I tried something like below, but doesn't work.
if (something happens) {
changeBackgroundColor();
if (alert("My alert box")){
} else {
//Return to previous page
window.history.go(-1);
}
}
..
....
.....
function changeBackgroundColor() {
document.body.style.backgroundColor = "white";
}

Changing your background color will not hide any of the elements on your page. You will most likely need an overlay, which can be a simple div styled something like this:
.overlay {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:999; /* adjust the z-index as you need it */
background:#fff;
display:none;
}
you can then show the overlay before your alert and hide it afterwards
function toggleOverlay( show ){
document.querySelector('.overlay').style.display = (show === true) ? 'block' : 'none';
}
// ...
toggleOverlay(true);
// Kudos to Kobe for pointing out that the alert is triggered before the repaint
// simple way to solve the problem is a timeout, which will
// make the browser paint the changes before the alert is triggered
setTimeout(function(){
alert('Something');
toggleOverlay(false);
}, 0);
Here is a working jsFiddle: https://jsfiddle.net/UsernamesSuck/cpdrtgb8/2/

The problem is that when alert() is called the rest of the script pauses. A solution is to wrap it in a setTimeout() function to make it async to allow the rest of the code to be executed.
Take a look at the following Fiddle for a possible solution:
https://jsfiddle.net/hckevbtp/

You can create an absolutely positioned div with a z-index greater than all of your content to hide it:
const hide = () => {
var div = document.getElementById('hide')
div.style.display = 'block'
setTimeout(() => {
alert()
div.style.display = 'none'
}, 0)
}
.hide {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: blue;
z-index: 1000;
display: none;
}
<p>Content Content Content</p>
<button onclick="hide()">HIDE</button>
<div id="hide" class="hide"></div>
Since alert is blocking, you can immediately remove the style after the alert, which will take effect after the alert is closed.

you can use the display='none' for the container and call the alert in setTimeout() as follows -
function openAlert() {
document.getElementsByClassName('block')[0].style.display = 'none';
setTimeout(function() {
alert('hello world!');
document.getElementsByClassName('block')[0].style.display = 'block';
}, 100);
}
html -
<body>
<div class='block'>
<button onclick={openAlert()}>hello</button>
</div>
</body>

Try this:
if (something happens) {
changeBackgroundColor();
setTimeout(function() {alert("hey");}, 0)
}
..
....
.....
function changeBackgroundColor() {
document.body.style.opacity= "0";
}

You can use below code:
function showMessage() {
var div = document.getElementById('div');
if(div == null){
div = document.createElement('div');
div.id = "div";
}
div.classList.add('alert')
document.body.appendChild(div)
setTimeout(function() {
alert("alert text");
div.classList.remove('alert');
},0)
}
Style:
.alert {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-color: white;
}

Related

JS Overlay background

I want to ask you a very simple question. Im trying to make a nav-mobile which opens whenever you touch the hamburger button. Everything works fine but I wanted to add a "darker" background to the main page.
I ended up doing something like:
JS CODE:
var Opened = document.getElementById('menu-open');
var Closed = document.getElementById('menu-close');
function OpenNav()
{
if (Opened.getAttribute('src') == "news-homepage-main/assets/images/icon-menu.svg"){
document.getElementById('nav-mobile').style.width = '250px';
document.body.style.backgroundColor = "black";
}
}
function CloseNav()
{
if (Closed.getAttribute('src') == "news-homepage-main/assets/images/icon-menu-close.svg"){
document.getElementById('nav-mobile').style.width = '0';
document.body.style.backgroundColor = "";
}
}
BLACK COLOR CHOICE IS ONLY A TEST, the color I chose is to let you see how the results is. Still doesn't work, look at the image.
Thanks!
I tried so far to change the:
document.body.style.backgroundColor = "black";
to a filter. Still not working. I tried to make even an overlay div, but still with no success.

My guess on what you want here is an overlay with a light dark background that will be placed in front of your main page when the side nav is opened and hidden when the side nav is closed. I would suggest an absolute element that takes full width and height of the page. Something like this:
<div id="overlay"></div>
With the rules below:
#overlay {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 2;
}
Have in mind you need to adjust your side-navs z-index to be less than the z-index of the overlay so it will be in front.
And in your function that open and closes the sidebar you should show and hide it accordingly. Something like this:
function OpenNav()
{
if (Opened.getAttribute('src') == "news-homepage-main/assets/images/icon-menu.svg"){
document.getElementById('nav-mobile').style.width = '250px';
document.getElementById('overlay').style.display = 'block';
}
}
function CloseNav()
{
if (Closed.getAttribute('src') == "news-homepage-main/assets/images/icon-menu-close.svg"){
document.getElementById('nav-mobile').style.width = '0';
document.getElementById('overlay').style.display = 'none';
}
}

(HTML/Js) Cycling element visibilities

var terminal = document.getElementById('terminal');
var vncScreen = document.getElementById('screen');
var video = document.getElementById('video');
var vncToggle = document.getElementById('vncToggle');
var termToggle = document.getElementById('terminalToggle');
termToggle.onclick = function toggleTerminal() {
if (terminal.classList.contains('hide')) {
terminal.classList.remove('hide');
if (vncScreen.classList.contains('hide')) {} else {vncScreen.classList.add('hide')}
if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
} else {
terminal.classList.add('hide');
if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
}
}
vncToggle.onclick = function toggleVNC() {
if (vncScreen.classList.contains('hide')) {
vncScreen.classList.remove('hide');
if (terminal.classList.contains('hide')) {} else {terminal.classList.add('hide')}
if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
} else {
vncScreen.classList.add('hide');
if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
}
}
.black-box {
background: black;
height: 500px;
width: 500px;
position: absolute;
}
.green-box {
background: green;
height: 500px;
width: 500px;
position: absolute;
}
.blue-box {
background: blue;
height: 500px;
width: 500px;
position: absolute;
}
.hide {
display: none;
}
<button class="button" id="terminalToggle" title="Toggle Terminal">Toggle terminal</button>
<button class="button" id="vncToggle" title="Toggle Terminal">Toggle vnc</button>
<div id='video' class="black-box"></div>
<div id='screen' class="green-box hide"></div>
<div id='terminal' class="blue-box hide"></div>
basically when you click "Toggle terminal" it should show blue and then if you click again go back to black; when you click "Toggle vnc" it should show green and then if you click again go back to black. If you click "Toggle vnc" and it is already blue, it should turn green and vice versa (but clicking "Toggle terminal")
I currently have the following Js:
var terminal = document.getElementById('terminal'); //video-like element
var vncScreen = document.getElementById('screen'); //video-like element
var video = document.getElementById('video'); //video-like element
var vncToggle = document.getElementById('vncToggle'); //button
var termToggle = document.getElementById('terminalToggle'); //button
termToggle.onclick = function toggleTerminal() {
terminal.classList.toggle('hide');
vncScreen.classList.toggle('hide');
video.classList.toggle('hide');
}
vncToggle.onclick = function toggleVNC() {
vncScreen.classList.toggle('hide');
terminal.classList.toggle('hide');
video.classList.toggle('hide');
}
and css:
.hide {
display: none;
}
When I had just two different HTML elements, this class toggling methodology worked. Now that there are 3, I'm not sure it will work as desired.
video is initially visible i.e. hide is not in its classList
terminal is initially hidden i.e. hide is in its classList
vncScreen is initially hidden i.e. hide is in its classList
When toggleTerminal() is called:
video becomes hidden
terminal becomes visible
vncScreen becomes visible (but it should not)
If toggleVNC() is called (after toggleTerminal()):
video becomes visible again (but it should not)
terminal becomes hidden
vncScreen becomes hidden
Note how if the either of the function calls were toggled only by themselves, this method would work (provided I removed vncScreen.classList.toggle('hide'); in toggleTerminal() and terminal.classList.toggle('hide'); in toggleVNC()).
The problem is I need to account for any order of button-presses of termToggle and vncToggle. Essentially my goal is to "cycle" these elements such that:
1) Toggling of the "selected" element (i.e. termToggle corresponds to visibility of terminal element && vncToggle corresponds to visibility of vncScreen element) hides the remaining two elements (video && vncScreen || terminal && video respectively)
2) The order of toggling of "selected" elements does not affect 1)
3) A second toggle of the "selected" element will hide itself and the other element that is not video
Any ideas on how to best accomplish this?
At one point I thought about doing some logic that evaluated whether hide was contained in the appropriate classList's and just manually add or remove the hide class accordingly but this seemed kind of sloppy to me (idk, maybe its not?).

See code snippet in question for functionality, Js redundantly posted here:
var terminal = document.getElementById('terminal');
var vncScreen = document.getElementById('screen');
var video = document.getElementById('video');
var vncToggle = document.getElementById('vncToggle');
var termToggle = document.getElementById('terminalToggle');
termToggle.onclick = function toggleTerminal() {
if (terminal.classList.contains('hide')) {
terminal.classList.remove('hide');
if (vncScreen.classList.contains('hide')) {} else {vncScreen.classList.add('hide')}
if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
} else {
terminal.classList.add('hide');
if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
}
}
vncToggle.onclick = function toggleVNC() {
if (vncScreen.classList.contains('hide')) {
vncScreen.classList.remove('hide');
if (terminal.classList.contains('hide')) {} else {terminal.classList.add('hide')}
if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
} else {
vncScreen.classList.add('hide');
if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
}
}

Jquery Simple ScreenSaver

Hello guys reading this article i create simple screensaver, but i got one problem, when i let my mouse stop i need to hide one div and show other, but when div shows animation stop, what is my problem, my code
var mousetimeout;
var screensaver_active = false;
var idletime = 5;
var screenSaver = $("#screenSaverForm");
var formDiv = $("#bodyForm");
function show_screensaver() {
formDiv.fadeOut(100);
screenSaver.fadeIn(900);
screensaver_active = true;
}
function stop_screensaver() {
screenSaver.fadeOut(100);
formDiv.fadeIn(900);
screensaver_active = false;
}
$(document).mousemove(function () {
clearTimeout(mousetimeout);
if (screensaver_active) {
stop_screensaver();
}
mousetimeout = setTimeout(function () {
show_screensaver();
}, 1000 * idletime); // 5 secs
});
and divs:
<div id="screenSaverForm" style="background-image: url(../../Content/img/screensavers.jpg); position: absolute; width: 100%; height:100%; left:0px; top: 0px; display: none; z-index:9999; display: none;">Example of a DIV element with a background image:</div>
Other div is simple, and if any can help, before show animation i need to reload page, any knows how to do this?

You could try adding this line in before stop_screensaver();
.
...
if (screensaver_active) {
location.reload(); //Refreshes the page
stop_screensaver();
}
...
.
Or, if you just want to scroll to the top of the page:
.
...
if (screensaver_active) {
$(window).scrollTop(0); //Scroll to top of page
stop_screensaver();
}
...
.

toggleClass not removing initial div img source

I'm trying to toggle between images, but the code I have is just laying one on top of the other, not removing the initial image. This is what I have:
<script>
var button = document.getElementById('box'),
text = document.getElementById('menu');
button.onclick = function () {
var isHidden = text.style.display == 'none';
text.style.display = isHidden ? 'block' : 'none';
};
$("#box").click(function () {
$(this).toggleClass("red");
});
</script>
I have the intial image set up as a div and the second one as a class:
.close {
width: 29px;
z-index: 1;
height: 16px;
cursor: crosshair;
background-image: url('http://gabrielamagana.com/project1/ndxz-studio/site/sample/close-eye.png');
}
This is probably not the best way to set this up but '=I'm fairly new at this.

If you're trying to toggle images, try the following technique:
I don't have a clear understanding of your existing HTML structure so this simply serves as an example.
Live Demo
HTML
<div class='img1' id='dvImage'> </div>
JS
$(function(){
var ele = $('#dvImage');
ele.click(function(){
ele.toggleClass("img2");
});
});
CSS
.img1, .img2{
width:400px;
height:100px;
}
.img1{
background-image:url('http://dummyimage.com/400x150/000/fff');
}
.img2{
background-image:url('http://dummyimage.com/400x150/000/aaa');
}
NOTE: To get rid of the flicker between initial image loads, use a "sprite image." You'll gain performance by reducing requests and eliminate the flicker associated with loading new images.

How do I make the jquery slide down effect like the one stackoverflow uses? [duplicate]

This is the first time I visited stack overflow and I saw a beautiful header message which displays a text and a close button.
The header bar is fixed one and is great to get the attention of the visitor. I was wondering if anyone of you guys know the code to get the same kind of header bar.

Quick pure JavaScript implementation:
function MessageBar() {
// CSS styling:
var css = function(el,s) {
for (var i in s) {
el.style[i] = s[i];
}
return el;
},
// Create the element:
bar = css(document.createElement('div'), {
top: 0,
left: 0,
position: 'fixed',
background: 'orange',
width: '100%',
padding: '10px',
textAlign: 'center'
});
// Inject it:
document.body.appendChild(bar);
// Provide a way to set the message:
this.setMessage = function(message) {
// Clear contents:
while(bar.firstChild) {
bar.removeChild(bar.firstChild);
}
// Append new message:
bar.appendChild(document.createTextNode(message));
};
// Provide a way to toggle visibility:
this.toggleVisibility = function() {
bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
};
}
How to use it:
var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();

Update:
Check out the DEMO
Code Used:
$(function(){
$('#smsg_link').click(function(){
showMessage('#9BED87', 'black', 'This is sample success message');
return false;
});
$('#imsg_link').click(function(){
showMessage('#FFE16B', 'black', 'This is sample info message');
return false;
});
$('#emsg_link').click(function(){
showMessage('#ED869B', 'black', 'This is sample error message');
return false;
});
});
/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window
params:
- bgcolor: The background color for the message box
- color: The text color of the message box
- msg: The message text
*/
var interval = null;
function showMessage(bgcolor, color, msg)
{
$('#smsg').remove();
clearInterval(interval);
if (!$('#smsg').is(':visible'))
{
if (!$('#smsg').length)
{
$('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
position:'fixed',
top:0,
left:0,
width:'98%',
height:'30px',
lineHeight:'30px',
background:bgcolor,
color:color,
zIndex:1000,
padding:'10px',
fontWeight:'bold',
fontSize:'18px',
textAlign:'center',
opacity:0.8,
margin:'auto',
display:'none'
}).slideDown('show');
interval = setTimeout(function(){
$('#smsg').animate({'width':'hide'}, function(){
$('#smsg').remove();
});
}, 3000);
}
}
}
If you want to create your own, check out the slideToggle function of jQuery.

The relevant css would include:
position: fixed;
top: 0;
width: 100%;
More information about position:fixed:
An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
If IE6 support is important to you, you may wish to research workarounds.

Here is an alternative method using jQuery which would also slide up/down on show/hide.
Add the following HTML right after the <body> tag in your page:
<div id="msgBox">
<span id="msgText">My Message</span>
<a id="msgCloseButton" href='#'>close</a>
</div>
Add this CSS to your stylesheet
#msgBox {
padding:10px;
background-color:Orange;
text-align:center;
display:none;
font:bold 1.4em Verdana;
}
#msgCloseButton{
float:right;
}
And finally here is the javascript to setup the close button and functions to show and hide the message bar:
/* Document Ready */
$(function () {
SetupNotifications();
});
SetupNotifications = function () {
//setup close button in msgBox
$("#msgCloseButton").click(function (e) {
e.preventDefault();
CloseMsg();
});
}
DisplayMsg = function (sMsg) {
//set the message text
$("#msgText").text(sMsg);
//show the message
$('#msgBox').slideDown();
}
CloseMsg = function () {
//hide the message
$('#msgBox').slideUp();
//clear msg text
$("#msgtText").val("");
}
To perform a simple test you could try this:
Show Message!

Something like this?
$("#bar").slideUp();
However, here I think they fade out first the bar then they bring the main container up, so that'd be something like that:
$("#bar").fadeOut(function(){
$("#container").animate({"top":"0px"});
});

Develop Reference

JavaScript is the programming language of the Web.

Create alert pop-up with blank background screen [duplicate] - javascript

The problem is that when alert() is called the rest of the script pauses. A solution is to wrap it in a setTimeout() function to make it async to allow the rest of the code to be executed. Take a look at the following Fiddle for a possible solution: https://jsfiddle.net/hckevbtp/

Try this: if (something happens) { changeBackgroundColor(); setTimeout(function() {alert("hey");}, 0) } .. .... ..... function changeBackgroundColor() { document.body.style.opacity= "0"; }

Related

JS Overlay background

(HTML/Js) Cycling element visibilities

Jquery Simple ScreenSaver

toggleClass not removing initial div img source

How do I make the jquery slide down effect like the one stackoverflow uses? [duplicate]

Categories

Resources