前端 - 请问如何自定义alert UI，或是有外挂能支持 (能兼容IE11)?

Question

请问如何自定义alert UI，或是有外挂能支持阻断程序运行效果 (能兼容IE11)

目前用过几个套件，有无法兼容IE11，有的无法实现alert时阻断程序运行，按确认后，其他JS才能继续运行效果
如，用alert用户可以看到提示字，知道自己完成送出

alert('资料确认完成');windows.reload()

用其他套件会一闪而过，直接reload

Answer 1

应该用回调的方式去执行下方的 window.reload()，而不是用 alert() 来“阻断运行”。

比如各种UI组件库提供的Dialog组件都有以回调或者链式调用的方式，来继续执行在用户确认操作之后的业务代码。

Answer 2

这个问题可以通过使用自定义提示框的库来解决，比如 Bootstrap Modals 或者 jQuery UI Dialog。这些库可以让你自定义提示框的样式和行为，并且它们都兼容 IE11。

下面是一个使用 Bootstrap Modals 的示例：

首先，你需要在你的 HTML 中添加一个模态框（modal）：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>        <h4 class="modal-title" id="myModalLabel">提示</h4>      </div>      <div class="modal-body">        资料确认完成      </div>      <div class="modal-footer">        <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>      </div>    </div>  </div></div>

然后，在 JavaScript 中，你可以使用 jQuery 打开模态框，并添加一个事件监听器来在用户点击确认按钮后执行其他 JavaScript 代码：

$('#myModal').on('shown.bs.modal', function () {  // 在这里添加其他需要运行的 JavaScript 代码})

最后，你可以使用 data-dismiss="modal" 属性来关闭模态框：

<button type="button" class="btn btn-default" data-dismiss="modal">确认</button>

使用这种方法，你可以自定义提示框的样式和行为，并且兼容 IE11。如果你需要更多的自定义选项，你可以考虑使用其他自定义提示框的库，比如 jQuery UI Dialog。