简介BootStrapmodel弹出框的使用.pdf

这篇文章主要介绍了 BootStrap model 弹出框的使用，介绍的非常详细，具有参考借鉴 价值，感兴趣的朋友一起学习吧 之前，我们讲解了 bootstrap tab 的使用，今天我们来了解下 bootstrap 中 model 弹出窗 的使用。 效果： 代码： lt;input id=btntext type=button value= 添 加 文 本 组 件 data-toggle=modal data-target=#myModal href=../SysManage/ZuJianManage.aspx/gt; lt;!-- Modal --gt; lt;div class=modal hide fade id=myModal tabindex=-1 role=dialoggt; lt;div class=modal-headergt;lt;button class=close type=button data-dismiss=modalgt; ×lt;/buttongt; lt;h3 id=myModalLabelgt;Modal headerlt;/h3gt; lt;/divgt; lt;div class=modal-bodygt;lt;/divgt; lt;/divgt; 很简单吧，这样就可以了。 注意： data-target 属性，指向了 model 的 id ，所以点击按钮， model 就会弹出来了。 当然你也可以用 js 来控制。 如下代码： 显示： $(#myModal).modal(show); 隐藏： $(#myModal).modal(hide); 开关： $(#myModal).modal(toogle); 事件 : $(#myModal).on(hidden, function () {// do something …}); 注意：我这边用到了 href 属性，这是让 model 去 remote 一个 url 。当然 ，你可以把你 要的内容，直接写在 model-body 里面。 认真看 model 的 div 结构， 你就会明白， model-body 是代表内容， model-header 是头部， 那么如果要在底部加两个按钮，那么就得用下面的代码了。 lt;div class=modal-footergt; lt;a href=# class=btngt; 关闭 lt;/agt; lt;a href=# class=btn btn-primarygt; 保存 lt;/agt; lt;/divgt; 注意： 如果要给 model 设置宽度， 那必须得加上布局。 就是把 model 放在下面的代码块 中，并且设置 model 的宽度。 style=width:500px. 对了，你还不可以用 span 样式直接放到 class 里面。。 lt;div class=containergt;lt;/divgt; 以上所述是小编给大家介绍的 BootStrap model 弹出框的使用，希望对大家有所帮助！