其他分享
首页 > 其他分享> > 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>        

 

标签:模态,触发,myModal,Bootstrap,static,modal,组件,data
来源: https://www.cnblogs.com/JasperZhao/p/15250282.html