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

Question

If I have an alert in my JavaScript code in the HTML header, such as: 如果我在HTML标头中的JavaScript代码中有警报，例如：

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

is there a way I can use a modal window from Bootstrap instead of the browser's native alert window? 有什么方法可以使用Bootstrap中的模式窗口而不是浏览器的本机警报窗口？

If so, can someone show me a simple example for the one line of code I have above? 如果是这样，有人可以给我看我上面上面一行代码的简单示例吗？ The modal should just have an "OK" button (nothing fancy). 模态应该只有一个“确定”按钮（没什么花哨的）。

Answer 1

Ues Bootbox.js It is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter's Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Ues Bootbox.js这是一个小型JavaScript库，可让您使用Twitter的Bootstrap模态创建编程对话框，而不必担心创建，管理或删除任何必需的DOM元素或JS事件处理程序。

Here's the simplest possible example: 这是最简单的示例：

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

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

Answer 2

First, add the html for the modal with an id 首先，添加具有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>

Second, modify your javascript to set the content of the modal body and show it 其次，修改您的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 已采纳