I'm looking for something like alert(), but that doesn't "pause" the script.
I want to display an alert and allow the next command, a form submit(), to continue. So the page will be changing after the alert is displayed, but it won't wait till the user has clicked OK.
Is there something like this or is it just one of those impossible things?
You could do the alert in a setTimeout (which a very short timeout) as setTimeout is asynchronous:
setTimeout("alert('hello world');", 1);
Or to do it properly you really show use a method rather than a string into your setTimeout:
setTimeout(function() { alert('hello world'); }, 1);
Otherwise you open yourself up to JavaScript injection attacks. When you pass a string it is run through the JavaScript eval function.
setTimeout is not asynchronous, it just postpones the synchronous execution of blocking code. Once the alert is displayed, code execution is still blocked until the user clicks OK.
If already using JQuery http://docs.jquery.com/UI/Dialog is simple to use and styles nicely.
98% of the time there is a way to move your message script so that it calls after everything else executes. For that other 2%, I like to use floating divs that look something like this. You can then change your CSS to match the style of your application/website or to make it look more like a standard windows popup.
/*HTML*/
<div class="floatingDiv" id="msgBox" style="visibility:hidden"></div>
/*javaScript*/
function openWindow(id){
"use strict";
document.getElementById(id).style.visibility = 'visible';
}
function closeWindow(id){
"use strict";
document.getElementById(id).style.visibility = 'hidden';
}
function myMsgBox(TITLE,MESSAGE) {
"use strict";
document.getElementById("msgBox").innerHTML = "<a href=\"javascript:closeWindow('msgBox')\" style=\"float:right\"><img src=\"imgs/close.png\" onmouseover=\"src='imgs/closeOver.png'\" onmouseout=\"src='imgs/close.png'\"/ alt=\"[close]\"></a><h2 style=\"text-align:center; margin-top:0px;\">" + TITLE + "</h2><hr><p align=\"left\">" + MESSAGE + "</p>";
openWindow("msgBox");
}
/*CSS*/
.floatingDiv {
position:absolute;
z-index:10000;
left:33%;
top:250px;
width:33%;
background-color:#FFF;
min-width:217px;
text-align: left;
border-radius: 10px 10px;
border:solid;
border-width:1px;
border-color:#000;
vertical-align:top;
padding:10px;
background-image: -ms-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
background-image: -moz-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
background-image: -o-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
background-image: -webkit-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
background-image: linear-gradient(to bottom, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%);
box-shadow:3px 3px 5px #003;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000033', Direction=145, Strength=3);
}
It may not be what you're looking for, but it might be appropriate to use window.status = 'foo'.
I use this a lot in one of my webapps for a intranet. Also the setTimeout approach works too, but it can block if the browser is busy on an intensive task. However the status bar update is always immediate.
This does require your viewers to have the setting that javascript can change the status bar -- always the case if it's a trusted site.
window.status supposed to do?
In this case, it would be more appropriate to use DHTML and JavaScript to dynamically display a message, either in a plain HTML element, or something that looks more like a dialog (but isn't). That would give you the control you need. All of the major JavaScript frameworks (YUI, Dojo, and others) would give you the ability to display a message asynchronously.
Not reliably. Use a div on the new page.
Years later, there is now dialog.show() (as opposed to dialog.showModal()) that gives you a non-modal alert-lookalike.
<a-toast style="visibility:hidden"></a-toast>
<script>
function toast(message = "", options = { duration: 2000 }) {
const el = document.querySelector("a-toast")
function remove() {
el.style.visibility = 'hidden';
}
if (!message) {
remove()
return
}
el.style.visibility = 'visible';
// el.innerText = message
el.innerHTML = message
// Hide
if (options.duration) {
setTimeout(() => {
remove()
}, options.duration)
}
}
// Usage
toast("Hi <b>there</b>", { duration: 0 })
</script>
<style>
a-toast {
position: fixed;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
bottom: 10px;
background-color: #FFF;
min-width: 200px;
text-align: left;
border: solid;
border-width: 1px;
border-color: #000;
vertical-align: top;
padding: 10px;
}
</style>
