自定义 JS 提示弹出窗口

Question

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

1. 更改 - 从提示框中获取值并更改首先选中以启动提示的值。
2. 继续 - 不在乎，继续使用原始值。
3. 取消 - 忘记这一点，只需摆脱盒子。

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

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

Answer 1

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

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

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

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

Answer 2

jQuery UI 有一个对话框组件可用于此目的。

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

Answer 3

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

Answer 4

https://github.com/bmmage/customAlert

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

Answer 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>