Bootstrap： 模态框组件

 

 

 　　data-toggle="modal" 触发类型:模态框modal

　　 data-target="#myModal" 触发的节点

　　 data-backdrop="static" 点击黑灰色背景，不会关闭模态框

<button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框
</button>

<!-- 声明定义模态框组件 -->
<div class="modal" id="myModal" data-backdrop="static">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
    <!-- 内容声明 -->
    　　<div class="modal-content">
    　　　　<!-- 1.框的标题 -->
    　　　　<div class="modal-header">
       　　　　 <button class="close" data-dismiss="modal">
        　　　　    <span>&times;</span>
        　　　　</button>
       　　 　　<h4 class="modal-title">友情提示</h4>
   　　 　　</div>
   　　 　　<!-- 2.框内信息 -->
   　　　　 <div class="modal-body">
       　　　　 服务器错误，请稍后再试！
        　　　　<hr>
        　　　　<img src="img/1.jpg" width="200px">
        　　　　<hr>
        　　　　<input type="text">
   　　 　　</div>
    　　　　<!-- 3.框的按钮 -->
    　　　　<div class="modal-footer">
       　　 <button class="btn btn-info">确定</button>
        　　<button class="btn btn-default" data-dismiss="modal">取消</button>
　　　　　　</div>
　　　　</div>
　　</div>
</div>