Bootstrap模态窗口扩展jquery插件

创客云


这是一款bootstrap模态窗口扩展插件。它在原有的bootstrap模态窗口的基础上,通过CSS3添加了模态窗口动画,还添加了ajax获取数据功能和其它一些新的功能。

使用方法

在页面中引入下面的文件。

  1. <link href="css/bootstrap.min.css" rel="stylesheet" />
  2. <link href="css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
  3. <link href="css/bootstrap-modal.css" rel="stylesheet" />
  4. <script src="js/jquery.min.js" type="text/javascript"></script>
  5. <script src="js/bootstrap.min.js"></script>
  6. <script src="js/bootstrap-modalmanager.js"></script>
  7. <script src="js/bootstrap-modal.js"></script>

HTML结构

  1. <div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
  2.   <div class="modal-header">
  3.     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  4.     <h4 class="modal-title">Responsive</h4>
  5.   </div>
  6.   <div class="modal-body">
  7.     <div class="row">
  8.       <div class="col-md-6">
  9.         <h4>Some Input</h4>
  10.         <p><input class="form-control" type="text"></p>
  11.         <p><input class="form-control" type="text"></p>
  12.         <p><input class="form-control" type="text"></p>
  13.         <p><input class="form-control" type="text"></p>
  14.         <p><input class="form-control" type="text"></p>
  15.         <p><input class="form-control" type="text"></p>
  16.         <p><input class="form-control" type="text"></p>
  17.       </div>
  18.       <div class="col-md-6">
  19.         <h4>Some More Input</h4>
  20.         <p><input class="form-control" type="text"></p>
  21.         <p><input class="form-control" type="text"></p>
  22.         <p><input class="form-control" type="text"></p>
  23.         <p><input class="form-control" type="text"></p>
  24.         <p><input class="form-control" type="text"></p>
  25.         <p><input class="form-control" type="text"></p>
  26.         <p><input class="form-control" type="text"></p>
  27.       </div>
  28.     </div>
  29.   </div>
  30.   <div class="modal-footer">
  31.     <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
  32.     <button type="button" class="btn btn-primary">Save changes</button>
  33.   </div>
  34. </div>

通过按钮打开模态窗口。

  1. <button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#responsive">View Demo</button>

Github网址:https://github.com/jschr/bootstrap-modal

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/50251.html
云模板

发表评论