Question

我正在寻找window.prompt（），window.confirm（）和window.alert（）的替代方法。它是一个复杂的Web应用程序所必需的，其中窗口有一个onblur（）方法，IE和Safari在提示提示时错误地触发了这种模糊（实际上Safari崩溃并且IE忽略了提示，因为用户不允许“脚本化窗口”）。我可以暂时禁用window.blur，但IE问题更严重，并且没有简单的修复。

我知道可以做到，我只是希望有人可能会有一个很好的“开箱即用”解决方案（越轻越好），我可以将其作为一个简单的直接替代品。我更喜欢纯粹的JS与yahoo / jquery依赖的东西，但我会采取我能得到的东西。

我真的很喜欢暂停脚本执行的解决方案（比如创建无限循环），但如果我必须使用回调，我会。没有必要拖延。

Answer 1

我真的很喜欢暂停脚本执行的解决方案

除了confirm / alert和现在有效解散prompt之外，唯一的其他同步解决方案是showModalDialog。这将打开一个单独的窗口，其中可以包含您喜欢的任何HTML控件。

但是，这是一个非标准的IE扩展。 Firefox和Webkit现在也实现了它;最新的桌面浏览器，现在只是Opera而不是。显然包括移动和旧浏览器的支持更糟糕。此外，由于它实际上是一个弹出窗口，浏览器不会让你在没有直接用户交互的情况下触发modalDialog，如点击。

在任何情况下，每个人都讨厌真正的同步（模态）提示，冻结浏览器UI的其余部分，直到回答为止。如果可能的话，带回调的页内弹出式div（伪模态）绝对是用户友好的事情。当然，这不会是依赖于同步提示的代码的替代品。

Answer 2

感谢您的回复。由于看起来大多数答案都需要一个框架，我编写了自己的解决方案。它非常轻巧，简单，不需要依赖，我还没有。它不像框架UI版本那样通用或可重用。

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

相当于窗口提示/确认/警告作为纯JS / CSS解决方案？

2 个答案: