zoukankan      html  css  js  c++  java
  • 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>        
  • 相关阅读:
    每日总结
    每日总结
    每日总结
    10.30
    10.29
    10.28
    10.27
    10.26
    10.25
    10.24
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15250282.html
Copyright © 2011-2022 走看看