bootstrap model弹出框的使用

之前,我们讲解了bootstrap tab的使用,今天我们来了解下bootstrap 中model弹出窗的使用。

效果:

代码:
<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal"  href="../SysManage/ZuJianManage.aspx"/>
<!-- Modal -->
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body"></div>
</div>

很简单吧,这样就可以了。
注意: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是头部,那么如果要在底部加两个按钮,那么就得用下面的代码了。
<div class="modal-footer">
<a href="#" class="btn">关闭</a>
<a href="#" class="btn btn-primary">保存</a>
</div>
注意:如果要给model设置宽度,那必须得加上布局。就是把model放在下面的代码块中,并且设置model的宽度。style="width:500px".对了,你还不可以用span样式直接放到class里面。。
<div class="container"></div>

推荐阅读更多精彩内容

  • 第4章 Bootstrap装饰插件 JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片...
    海上名月阅读 1,295评论 5 5
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 9,412评论 3 184
  • 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组...
    GQ1994阅读 3,123评论 0 1
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    程序员小月阅读 5,968评论 0 41
  • 其实从小有种MIT情怀,不是Yale不是Harvard或是Stanford……真的就是MIT...因为小时候喜欢炎...
    心气儿GirL_Ye阅读 113评论 0 0
  • 在当今这个瞬息万变的时代,唯一不变的就是“变”。我们每天都有可能面对各种各样的突发情况,这个时候唯一能做的就是解决...
    阿超有话说阅读 302评论 2 6
  • 这几天因为要参加国际丽人大赛,每天排练从早上九点到下午六点,然后还要准备旗袍、晚礼服、还有民族服装,有点时间就护肤...
    顾霏阅读 101评论 0 0
  • 1. 系统:橙子QAQ加入了动漫社。 系统:灵凤加入了动漫社。 系统:Dream traveler森凉加入了动漫社...
    云染尘霜阅读 171评论 5 1