equivalent to window prompt/confirm/alert as pure JS/CSS solution?

Question

I'm looking for an alternative to window.prompt(), window.confirm() and window.alert(). It's required for a complex web application where the window has an onblur() method and both IE and Safari incorrectly trigger this blur when raising a prompt (actually Safari crashes and IE ignores the prompt because the user hasn't allowed "scripted windows"). I can disable the window.blur temporarily but the IE issue is more serious and there's no simple fix.

I know it can be done, I'm just hoping someone may have a nice "out of the box" solution (the lighter the better) that I can use as a simple drop-in replacement. I'd prefer pure JS to something with yahoo/jquery dependencies but I'll take what I can get.

I'd really like a solution that pauses script execution (like creating an endless loop) but if I have to use callbacks I will. It isn't necessary to be draggable.

Answer 1

I'd really like a solution that pauses script execution

The only other synchronous solution apart from confirm/alert and the now-effectively-defunct prompt is showModalDialog. This opens a separate window which can contain whatever HTML controls you like.

However, this is a non-standard IE extension. Firefox and Webkit have now also implemented it; of the latest desktop browsers, it's just Opera now that doesn't. Obviously including mobile and older browser support is much worse. Also, as it's effectively a popup window, browsers won't let you trigger a modalDialog without direct user interaction like a click.

In any case, everyone hates real synchronous (modal) prompts, that freeze the rest of the browser UI until answered. If it's at all possible, the in-page popup div (pseudo-modal) with callback is absolutely the user-friendly thing to do. Of course that won't be a drop-in-replacement for code relying on a synchronous prompt.

Answer 2

Thanks for the responses. Since it looks like most of the answers are going to require a framework I wrote my own solution. It's extremely lightweight and simple and requires no dependencies I don't already have. It's just not as generic or reusable as the framework UI versions.

HTML

    <!-- CHANGE TITLE DIALOG -->
    <div id="change_title_dialog" class="hidden">
        <p>Please name your new planner</p>
        <input name="title" type="text" value="#fw.planner.title#">
        <div class="dialog_buttons">
            <input id="cancel_change_title" type="button" name="cancel_change_title" value="cancel" onmousedown="this.form.elements.title.value=='#fw.planner.title#';hideLayer('change_title_dialog')">
            <input id="confirm_change_title" type="button" name="confirm_change_title" value="ok" onmousedown="hideLayer('change_title_dialog');confirmTitleChange()">
        </div>
    </div>

    <!-- CONFIRM DELETE DIALOG -->
    <div id="confirm_delete_dialog" class="hidden">
        <p>Are you sure you want to delete this planner?</p>
        <div class="dialog_buttons">
            <input id="cancel_delete" type="button" name="cancel_delete" value="cancel" onmousedown="hideLayer('confirm_delete_dialog')">
            <input id="confirm_delete" type="button" name="confirm_delete" value="ok" onmousedown="confirmDelete()">
        </div>
    </div>

<!-- FORM ACTIONS -->
<input type="button" name="delete" onmousedown="showLayer('confirm_delete_dialog')">
<input type="button" name="rename" onmousedown="showLayer('change_title_dialog')">

CSS

#planner #change_title_dialog, #planner #confirm_delete_dialog {
background-color: #eee;
color: black;
border: 1px solid black;
padding: 25px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; 
margin-left: -150px;
width: 300px;
}
#planner .dialog_buttons {
    text-align: right;
}