CODEWITHSUNDEEP
javascript
Darryl Hein
Darryl Hein

Reputation: 145097

Is there a JavaScript alert that doesn't pause the script?

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?

Upvotes: 49

Views: 45761

Answers (8)

jcomeau_ictx
jcomeau_ictx

Reputation: 38472

Years later, there is now dialog.show() (as opposed to dialog.showModal()) that gives you a non-modal alert-lookalike.

Upvotes: 0

Jelle Hak
Jelle Hak

Reputation: 499

<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>

Upvotes: 0

JasonK
JasonK

Reputation: 49

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);
}

Upvotes: 4

Aaron Powell
Aaron Powell

Reputation: 25107

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.

Upvotes: 56

eimaj
eimaj

Reputation: 655

If already using JQuery http://docs.jquery.com/UI/Dialog is simple to use and styles nicely.

Upvotes: 4

Jon DellOro
Jon DellOro

Reputation: 533

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.

Upvotes: 2

Mark
Mark

Reputation: 6306

Not reliably. Use a div on the new page.

Upvotes: 1

David M. Karr
David M. Karr

Reputation: 15225

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.

Upvotes: 1

Related Questions