代码之家 › 专栏 › 技术社区 › SpliFF

相当于纯JS/CSS解决方案的window prompt/confirm/alert?

html javascript

SpliFF · 技术社区 · 14 年前

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

我知道这是可以做到的,我只是希望有人可以有一个很好的“开箱即用”的解决方案(越轻越好),我可以作为一个简单的替代品使用。我更喜欢纯JS,而不是与Yahoo/jQuery相关的东西,但我会尽我所能。

我真的想要一个暂停脚本执行的解决方案(比如创建一个无休止的循环),但是如果必须使用回调,我会的。不需要牵引。

2 回复 | 直到 14 年前

bobince 14 年前

我真的想要一个暂停脚本执行的解决方案

除了 confirm / alert 现在实际上已经不存在了 prompt 是 showModalDialog . 这将打开一个单独的窗口,其中可以包含您喜欢的任何HTML控件。

但是,这是一个非标准的IE扩展。火狐和webkit现在也实现了它;在最新的桌面浏览器中,现在它只是Opera,而不是Opera。显然,包括移动和旧浏览器支持更糟。此外,由于它实际上是一个弹出窗口,浏览器不会让您触发模式对话框,而无需直接用户交互(如单击)。

在任何情况下,每个人都讨厌真正的同步(模式)提示,它们会冻结浏览器UI的其余部分,直到得到响应。如果可能的话,带回调的页内弹出DIV(伪模式)绝对是用户友好的事情。当然,这并不是对依赖同步提示的代码的替换。

SpliFF 14 年前

感谢您的回复。因为看起来大多数答案都需要一个框架,所以我编写了自己的解决方案。它非常轻量和简单,不需要依赖性,我还没有。它不像框架用户界面版本那样通用或可重用。

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