ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Bootstrap: 模态框组件

2021-09-10 10:35:29  阅读:159  来源: 互联网

标签:模态 触发 myModal Bootstrap static modal 组件 data


 

 

   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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有