首页 > 其他 > 详细

Bootstrap: 模态框组件

时间:2021-09-12 05:24:07      阅读:27      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

   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>        

 

Bootstrap: 模态框组件

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!