如何将Bootstrap 3模态用于JavaScript alert（）？

Question

如果我在HTML标头中的JavaScript代码中有警报，例如：

<head>
...
<script>
    ...
    if (errors) {
        alert('The following error(s) occurred:\n' + errors);
    }
    ...
</script>
</head>

有什么方法可以使用Bootstrap中的模式窗口而不是浏览器的本机警报窗口？

如果是这样，有人可以给我看我上面上面一行代码的简单示例吗？ 模态应该只有一个“确定”按钮（没什么花哨的）。

Answer 1

Ues Bootbox.js这是一个小型JavaScript库，可让您使用Twitter的Bootstrap模态创建编程对话框，而不必担心创建，管理或删除任何必需的DOM元素或JS事件处理程序。

这是最简单的示例：

bootbox.alert("Hello world!", function() {
  Example.show("Hello world callback");
});

更多详细信息，请访问Bootbox.js

Answer 2

首先，添加具有id的模式的html

<div id="alertModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Errors Found!</h4> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal"> Close</button> </div> </div> </div> </div>

其次，修改您的JavaScript以设置模态主体的内容并显示它

<script>
...
if (errors) {
    var message = 'The following error(s) occurred:\n' + errors;
    $('#alertModal').find('.modal-body p').text(message);
    $('#alertModal').modal('show')
}
...
</script>

如何将Bootstrap 3模态用于JavaScript alert（）？

问题描述

2 个解决方案

解决方案1
3 2014-06-14 07:25:35

解决方案2
2 已采纳

如何将Bootstrap 3模态用于JavaScript alert（）？

问题描述

2 个解决方案

解决方案1 3 2014-06-14 07:25:35

解决方案2 2 已采纳

解决方案1
3 2014-06-14 07:25:35

解决方案2
2 已采纳