modal_window.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>H+ 后台主题UI框架 - 模态窗口</title>
  7. <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  8. <meta name="description" content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术">
  9. <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  10. <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  11. <link href="../css/animate.min.css" rel="stylesheet">
  12. <link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
  13. </head>
  14. <body class="gray-bg">
  15. <div class="wrapper wrapper-content animated fadeInRight">
  16. <div class="row">
  17. <div class="col-sm-4">
  18. <div class="ibox ">
  19. <div class="ibox-title">
  20. <h5>H+ 模态窗口</h5>
  21. </div>
  22. <div class="ibox-content">
  23. <p>
  24. 创建自定义的H+模态窗口可通过添加<code>.inmodal</code>类来实现。
  25. </p>
  26. <div class="text-center">
  27. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  28. 打开示例窗口
  29. </button>
  30. </div>
  31. <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
  32. <div class="modal-dialog">
  33. <div class="modal-content animated bounceInRight">
  34. <div class="modal-header">
  35. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
  36. </button>
  37. <i class="fa fa-laptop modal-icon"></i>
  38. <h4 class="modal-title">窗口标题</h4>
  39. <small class="font-bold">这里可以显示副标题。
  40. </div>
  41. <div class="modal-body">
  42. <p><strong>H+</strong> 是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.1),当然,也集成了很多功能强大,用途广泛的jQuery插件,她可以用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等,当然,您也可以对她进行深度定制,以做出更强系统。</p>
  43. <div class="form-group"><label>Email</label> <input type="email" placeholder="请输入您的Email" class="form-control"></div>
  44. </div>
  45. <div class="modal-footer">
  46. <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
  47. <button type="button" class="btn btn-primary">保存</button>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="ibox float-e-margins">
  55. <div class="ibox-title">
  56. <h5>大小设置</h5>
  57. </div>
  58. <div class="ibox-content">
  59. <p>
  60. 模态窗口提供两种大小尺寸,可以通过为模态窗口的<code>.modal-dialog</code>添加类来实现
  61. </p>
  62. <div class="text-center">
  63. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal5">
  64. 大模态窗口
  65. </button>
  66. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal6">
  67. 小模态窗口
  68. </button>
  69. </div>
  70. <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true">
  71. <div class="modal-dialog modal-lg">
  72. <div class="modal-content">
  73. <div class="modal-header">
  74. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  75. <h4 class="modal-title">窗口标题</h4>
  76. <small class="font-bold">这里可以显示副标题。
  77. </div>
  78. <div class="modal-body">
  79. <p><strong>H+</strong> 是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.1),当然,也集成了很多功能强大,用途广泛的jQuery插件,她可以用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等,当然,您也可以对她进行深度定制,以做出更强系统。</p>
  80. </div>
  81. <div class="modal-footer">
  82. <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
  83. <button type="button" class="btn btn-primary">保存</button>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="modal inmodal fade" id="myModal6" tabindex="-1" role="dialog" aria-hidden="true">
  89. <div class="modal-dialog modal-sm">
  90. <div class="modal-content">
  91. <div class="modal-header">
  92. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  93. <h4 class="modal-title">窗口标题</h4>
  94. </div>
  95. <div class="modal-body">
  96. <p><strong>H+</strong> 是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.1),当然,也集成了很多功能强大,用途广泛的jQuery插件,她可以用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等,当然,您也可以对她进行深度定制,以做出更强系统。</p>
  97. </div>
  98. <div class="modal-footer">
  99. <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
  100. <button type="button" class="btn btn-primary">保存</button>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="col-sm-8">
  109. <div class="ibox ">
  110. <div class="ibox-title">
  111. <h5>动画窗口</h5>
  112. </div>
  113. <div class="ibox-content">
  114. <p>
  115. 您可以通过为模态窗口的<code>.modal-content</code>添加类来实现动画效果
  116. </p>
  117. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
  118. 沿X轴转动
  119. </button>
  120. <div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
  121. <div class="modal-dialog">
  122. <div class="modal-content animated flipInY">
  123. <div class="modal-header">
  124. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  125. <h4 class="modal-title">窗口标题</h4>
  126. <small class="font-bold">这里可以显示副标题。
  127. </div>
  128. <div class="modal-body">
  129. <p><strong>H+</strong> 是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.1),当然,也集成了很多功能强大,用途广泛的jQuery插件,她可以用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等,当然,您也可以对她进行深度定制,以做出更强系统。</p>
  130. </div>
  131. <div class="modal-footer">
  132. <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
  133. <button type="button" class="btn btn-primary">保存s</button>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal4">
  139. 基本动画
  140. </button>
  141. <div class="modal inmodal" id="myModal4" tabindex="-1" role="dialog" aria-hidden="true">
  142. <div class="modal-dialog">
  143. <div class="modal-content animated fadeIn">
  144. <div class="modal-header">
  145. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  146. <i class="fa fa-clock-o modal-icon"></i>
  147. <h4 class="modal-title">窗口标题</h4>
  148. <small>这里可以显示副标题。
  149. </div>
  150. <div class="modal-body">
  151. <p><strong>H+</strong> 是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.1),当然,也集成了很多功能强大,用途广泛的jQuery插件,她可以用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等,当然,您也可以对她进行深度定制,以做出更强系统。</p>
  152. </div>
  153. <div class="modal-footer">
  154. <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
  155. <button type="button" class="btn btn-primary">保存</button>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="ibox ">
  163. <div class="ibox-title">
  164. <h5>设置选项</h5>
  165. </div>
  166. <div class="ibox-content">
  167. <p>
  168. 可以通过数据绑定或者Javascript来实现模态窗口的相关功能,如果使用数据绑定,可以为元素添加<code>data-</code>,如 <code>data-backdrop=""</code>。
  169. </p>
  170. <div class="table-responsive">
  171. <table class="table table-bordered table-striped">
  172. <thead>
  173. <tr>
  174. <th style="width: 100px;">名称</th>
  175. <th style="width: 50px;">类型</th>
  176. <th style="width: 50px;">默认值</th>
  177. <th>说明</th>
  178. </tr>
  179. </thead>
  180. <tbody>
  181. <tr>
  182. <td>backdrop</td>
  183. <td>boolean 或 string <code>'static'</code></td>
  184. <td>true</td>
  185. <td>遮罩层,或使用<code>'static'</code>指定遮罩层与关闭模态窗口不关联</td>
  186. </tr>
  187. <tr>
  188. <td>keyboard</td>
  189. <td>boolean</td>
  190. <td>true</td>
  191. <td>按Esc键时退出模态窗口</td>
  192. </tr>
  193. <tr>
  194. <td>show</td>
  195. <td>boolean</td>
  196. <td>true</td>
  197. <td>初始化完成后显示模态窗口</td>
  198. </tr>
  199. <tr>
  200. <td>remote</td>
  201. <td>path</td>
  202. <td>false</td>
  203. <td>
  204. <p><strong class="text-danger">推荐使用数据绑定方式,或使用<a href="http://api.jquery.com/load/">jQuery.load</a></p>
  205. <p>远程URL示例:</p>
  206. <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">href=</span><span class="s">"remote.html"</span> <span class="na">data-target=</span><span class="s">"#modal"</span><span class="nt">&gt;</span>Click me<span class="nt">&lt;/a&gt;</span></code></pre></div>
  207. </td>
  208. </tr>
  209. </tbody>
  210. </table>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. <script src="../js/jquery.min.js?v=2.1.4"></script>
  218. <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  219. <script src="../js/content.min.js?v=1.0.0"></script>
  220. </body>
  221. </html>