Bootstrap: 模态框组件

时间:2021-09-10
本文章向大家介绍Bootstrap: 模态框组件,主要包括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>        

原文地址:https://www.cnblogs.com/JasperZhao/p/15250282.html