bootstrap模态框实例

最新推荐文章于 2025-10-21 10:34:21 发布

原创最新推荐文章于 2025-10-21 10:34:21 发布 · 735 阅读

CC 4.0 BY-SA版权

H+是一款响应式、基于Bootstrap 3.3.6的扁平化主题，采用主流的左右两栏布局，利用Html5+CSS3技术，提供丰富的UI组件和集成jQuery插件，适用于多种Web应用。

  <div class="update_wrap">
              <div class="text-center">
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal5">
                      大模态窗口
                  </button>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal6">
                      小模态窗口
                  </button>
              </div>
              <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
                  <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                          <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                              <h4 class="modal-title">窗口标题</h4>
                              <small class="font-bold">这里可以显示副标题。
                          </div>
                          <div class="modal-body">
                              <p><strong>H+</strong> 是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
                          </div>

                          <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                              <button type="button" class="btn btn-primary">保存</button>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="modal inmodal fade" id="myModal6" tabindex="-1" role="dialog"  aria-hidden="true">
                  <div class="modal-dialog modal-sm">
                      <div class="modal-content">
                          <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                              <h4 class="modal-title">窗口标题</h4>
                          </div>
                          <div class="modal-body">
                              <p><strong>H+</strong> 是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                              <button type="button" class="btn btn-primary">保存</button>
                          </div>
                      </div>
                  </div>
              </div>
            </div>

bootstrap.js

bootstrap.css

jquery.js

js控制模态

开启关闭


$('#myModal5').modal('hide');


$('#myModal5').modal('show');

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

事件类型描述

show.bs.modal show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的relatedTarget 属性进行访问。
shown.bs.modal 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal hide 方法调用之后立即触发该事件。
hidden.bs.modal 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal 从远端的数据源加载完数据之后触发该事件。

JS代码：
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})