等同于纯粹的JS / CSS解决方案的窗口提示/确认/警报？ [英] equivalent to window prompt/confirm/alert as pure JS/CSS solution?

问题描述

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

我知道这是可以做到的，我只是希望有人可以有一个很好的开箱即用解决方案（越轻越好），我可以用它作为简单的替代品。我更喜欢纯JS的东西与雅虎/ jQuery的依赖，但我会拿我能得到的。

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

解决方案

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

$ c><！ - CHANGE TITLE DIALOG - >
< div id =change_title_dialogclass =hidden>
< p>请为您的新计划者命名< / p>
< input name =titletype =textvalue =＃fw.planner.title＃>
< div class =dialog_buttons>
< input id =cancel_change_titletype =buttonname =cancel_change_titlevalue =cancelonmousedown =this.form.elements.title.value =='＃fw.planner.title＃' ; hideLayer（ 'change_title_dialog'）>
< input id =confirm_change_titletype =buttonname =confirm_change_titlevalue =okonmousedown =hideLayer（'change_title_dialog'）; confirmTitleChange（）>
< / div>
< / div>

<！ - CONFIRM DELETE DIALOG - >
< div id =confirm_delete_dialogclass =hidden>
< p>您确定要删除此计划人员吗？< / p>
< div class =dialog_buttons>
< input id =cancel_deletetype =buttonname =cancel_deletevalue =cancelonmousedown =hideLayer（'confirm_delete_dialog'）>
< input id =confirm_deletetype =buttonname =confirm_deletevalue =okonmousedown =confirmDelete（）>
< / div>
< / div>

<！ - FORM行动 - >
< input type =buttonname =deleteonmousedown =showLayer（'confirm_delete_dialog'）>
< input type =buttonname =renameonmousedown =showLayer（'change_title_dialog'）>

CSS

  #planner #change_title_dialog，＃plannner #confirm_delete_dialog {
 background-color：#eee; 
颜色：黑色; 
 border：1px纯黑色; 
 padding：25px; 
位置：绝对; 
 top：50％; 
剩下：50％; 
 margin-top：-100px; 
 margin-left：-150px; 
 width：300px; 
} 
 #planner .dialog_buttons {
 text-align：right; 
} 
  

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.

解决方案

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

这篇关于等同于纯粹的JS / CSS解决方案的窗口提示/确认/警报？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！