自定义 JS 提示弹窗答案

【问题标题】：Custom JS Prompt Popup自定义 JS 提示弹窗
【发布时间】：2012-09-09 14:58:17
【问题描述】：

我正在寻找一种方法来自定义 JS 提示弹出窗口，以便我可以为用户提供我希望他们拥有的选项 -

更改 - 从提示框中获取值并更改选中的值以首先启动提示。
继续 - 不关心，继续原始值。
取消 - 忘记这个，把盒子扔掉。

选项 1 和 3 默认情况下可用（尽管选项 1 被称为“Ok”），但我不知道有一种方法可以操纵提示以提供第三个选项。

我猜这不能通过 JS 来完成，那么有任何 jQuery 插件可以帮助我吗？谢谢。

【问题讨论】：

您可能需要创建一个modal window 来完成您的要求。
@Aelios - 我尝试修改几个插件，这些插件更多地用于确认，而不是提示，但我一直无法成功。
@Duniyadnd - 感谢您的提示，将看看。

标签： javascript jquery prompt

【解决方案1】：

你是对的，你不能自定义浏览器的提示框：这是一个 jquery ui 插件，可以帮助您制作模态窗口：

http://docs.jquery.com/UI/Dialog/dialog#options

您也可以使用和自定义（扩展）这个：

http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

【讨论】：

谢谢，我会调查的。

【解决方案2】：

jQuery UI 有一个dialog component 可用于此目的。

如果您正在寻找一个不那么臃肿的解决方案，Google Search 会提供许多可重复使用的结果。

【讨论】：

我查看了 jQuery UI 对话框组件，但似乎无法扩展它来满足我的需求。我很快会再看一遍。
啊哈，我看到有几个迭代，包括“表单”对话框。这看起来不错，当然给了我一个方向。谢谢。
非常感谢您指出这一点。除了一件事之外，我使用它很好 - 当用户单击“保存”时，我会打开对话框表单，因此要让表单显示我必须做e.preventDefault()。麻烦的是，在表单成功验证后，我需要阻止发生的事件。有没有办法做到这一点？谢谢。
那是什么事件？这是一个简单的提交，您可以设置一个全局变量来说明表单是否已经过验证...然后您只需执行 $('#myForm').submit() 并省略 preventDefault() 部分，如果那样变量设置为true
另一种方法是通过 AJAX 完成所有操作 - 甚至提交本身...除非它包含文件元素

【解决方案3】：

检查这个插件，我想你可以改变你需要的一切：jAlert

【讨论】：

【解决方案4】：

https://github.com/bmmage/customAlert

jquery 插件，允许自定义警报窗口和向下滑动警报框。

【讨论】：

【解决方案5】：

试试，

  $( function() {
    $( "#dialog" ).dialog();
  } );

.but{
    width: 33%;
    float: left;
    text-align:center;
}
input{width: 100%;}

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


 
<div id="dialog" title="Basic dialog">
  <p>Enter any text</p>
  <input type="text" /><br><br>
  <div>
    <div class="but butt1"><button>Change</button></div>
    <div class="but butt2"><button>Continue </button></div>
    <div class="but butt3"><button>Cancel </button></div>
  </div>
</div>

【讨论】：