你的位置:首页 > 软件开发 > 网页设计 > BootStrap学习_模态框

BootStrap学习_模态框

发布时间:2015-11-10 13:00:06
一、模态框模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果只使用该功能,只引入BootStrap中的 modal.js即可1.用法:您可以切换模态框(Modal)插件的隐 ...

BootStrap学习_模态框

一、模态框

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果只使用该功能,只引入BootStrap中的 modal.js即可

1.用法:

您可以切换模态框(Modal)插件的隐藏内容:

  • 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置 data-target="#identifier" 或href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")。
  • 通过 JavaScript:使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
    $('#identifier').modal(options)
<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head>  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  <title></title>  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />  <script src='/images/loading.gif' data-original="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>  <script src='/images/loading.gif' data-original="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body style="margin-top:20px;margin-left:20px;">    <h3>创建模态框(Modal)</h3><!-- 按钮触发模态框 -->  <table class="table table-bordered">  <thead>   <tr>     <th>书名</th>     <th>单价</th>    <th>操作</th>   </tr>  </thead>  <tbody>   <tr>     <td>三国演义</td>     <td>50</td>     <td ><button class="btn btn-primary btn-lg" data-toggle="modal"  data-target="#myModal">  修改</button></td>   </tr>  </tbody></table><!-- 模态框(Modal) -->  <form ><div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-dialog">   <div class="modal-content">     <div class="modal-header">      <button type="button" class="close"        data-dismiss="modal" aria-hidden="true">         &times;      </button>      <h4 class="modal-title" id="myModalLabel">        模态框(Modal)标题      </h4>     </div>     <div class="modal-body">      <table class="table table-condensed">      <tr><td>书名:<input type="text" value="三国演义"/>价格:<input type="text" value="50" /></td></tr>        </table>     </div>     <div class="modal-footer">      <button type="button" class="btn btn-default"        data-dismiss="modal">关闭      </button>      <button type="button" class="btn btn-primary">        提交更改      </button>     </div>   </div>    <!-- /.modal-content --></div><!-- /.modal -->  </div> </form></body></html>

原标题:BootStrap学习_模态框

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录