首页 > 代码库 > bootstrip 实现弹出框效果

bootstrip 实现弹出框效果

2024-07-16 03:15:11   223人阅读

modal是Bootstrap提供的一个“窗口组件”，可以配合js实现弹出窗口的效果。

modal的class是“modal”，其中必须包含三个div部分，属性分别问modal-header,modal-body,modal-footer.

同时modal可以用来放置注册表单，示例如下：

[html] view plaincopyprint?
  1. <section>  
  2.     <div class="row">  
  3.         <div class="span12">  
  4.             <form class="modal form-horizontal" method="post" action="http://localhost">  
  5.                     <div class="modal-header">  
  6.                         <h1>Header</h1>  
  7.                     </div>  
  8.                     <div class="modal-body">  
  9.                         <fieldset>  
  10.                             <div class="control-group">  
  11.                                 <label class="control-label" for="username">Username:</label>  
  12.                                 <div class="controls">  
  13.                                     <input type="text" name="username">  
  14.                                 </div>  
  15.                             </div>  
  16.                             <div class="control-group">  
  17.                                 <label class="control-label" for="password">Password:</label>  
  18.                                 <div class="controls">  
  19.                                     <input type="password" name="password">  
  20.                                 </div>  
  21.                             </div>  
  22.                         </fieldset>  
  23.                     </div>  
  24.                     <div class="modal-footer">  
  25.                         <input  type="submit" class="btn btn-primary" value=http://www.mamicode.com/"Submit!"></button>  
  26.                     </div>  
  27.             </form>  
  28.         </div>  
  29.     </div>  
  30. </section>  

如果我们利用Bootstrap提供的modal插件，可以形成点击弹出浮动窗口的效果。

这需要让modal的div带有属性hide和fade，指定id。并且一开始的stype是display:none以便隐藏同时还需要一个用来控制弹出的按钮，这个按钮必须有data-toggle="modal"的元素，href=http://www.mamicode.com/modal的id。

如果想要在弹出表单中加入关闭按钮，则需要让按钮带有data-dismiss="modal"的属性。这样改造完成的页面代码：

[html] view plaincopyprint?
  1. <section>  
  2. <a data-toggle="modal" href=http://www.mamicode.com/"#regModal" class="btn btn-primary">show!</a>         
  3.     <div class="row">  
  4.         <form id="regModal" class="modal hide fade form-horizontal" method="post" action="http://localhost" style="display:none">  
  5.             <div class="modal-header">  
  6.                 <h1>Header</h1>  
  7.             </div>  
  8.             <div class="modal-body">  
  9.                 <fieldset>  
  10.                     <div class="control-group">  
  11.                         <label class="control-label" for="username">Username:</label>  
  12.                         <div class="controls">  
  13.                             <input type="text" name="username">  
  14.                         </div>  
  15.                     </div>  
  16.                     <div class="control-group">  
  17.                         <label class="control-label" for="password">Password:</label>  
  18.                         <div class="controls">  
  19.                             <input type="password" name="password">  
  20.                         </div>  
  21.                     </div>  
  22.                 </fieldset>  
  23.             </div>  
  24.             <div class="modal-footer">  
  25.                 <input  type="submit" class="btn btn-primary" value=http://www.mamicode.com/"Submit!">  
  26.                 <input type="button" class="btn" value=http://www.mamicode.com/"Close!" data-dismiss="modal">  
  27.             </div>  
  28.         </form>  
  29.     </div>  
  30. </section>  
当然既然这东西利用了js，也就能用js打开。一句话??$("#regModal").modal()


联系
我们