如何将Bootstrap 3模式用于JavaScript alert(）

How to use Bootstrap 3 modal for JavaScript alert()?

本文关键字：JavaScript alert 用于 模式 Bootstrap      更新时间：2023-09-26

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

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

有没有一种方法可以使用Bootstrap中的模式窗口而不是浏览器的本地警报窗口？

如果是的话，有人能给我举一个上面一行代码的简单例子吗？模态应该只有一个"OK"按钮(没什么特别的(。

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

这里有一个最简单的例子：

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

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

首先，为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">&times;</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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

其次，修改javascript以设置模态主体的内容，并将其显示为

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