Bootstrap警告框、弹出提示层、模态框的js插件效果总结

Bootstrap警告框js插件

经常会在bootstrap项目中遇到警告框、弹出提示层、弹出模态框组件等等场景应用。
使用前准备：

```插件使用之前，请先导入如下文件：```
jquery.min.js
bootstrap-alert.js
bootstrap.css

---

它的警告框插件效果很多！比如常见的调用方式：
- 通过调用class类名
- 通过javascript调用

下面讲一下常用的实现方式。

---

效果1：（调用class类名）

截图：

代码如下：

<div class="alert alert-danger fade in">
    <button type="button" class="close" data-dismiss="alert">×button>
    <strong>警告框标题strong> 提交失败！
div>

---

---

效果2：（添加用户行为：通过javascript调用）

此方法：把警告框和弹出模态框插件，捆绑应用 ！

截图：

代码如下：

<div class="alert alert-danger fade in">
    <button type="button" class="close" data-dismiss="alert">×button>
    <strong>警告框标题strong>提交失败！
div>


<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <h3>提示h3>
                div>
                <div class="modal-body">
                    <p>确定要关闭警告框信息？p>
                div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal">关闭button>
                div>
        div>
    div>
div>

<script type="text/javascript">
        $(function(){
            $(".close").click(function(){
                $(this).alert("close");
            });
            $(".alert").on("close.bs.alert",function(e){
                $("#myModal").modal();
            });
        });
script>

实际生产中，可根据需求自定义定制。

---

以上就是关于“ Bootstrap警告框、弹出提示层、模态框的js插件效果总结 ” 的全部内容。