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>
bootstrap model弹出框的使用的更多相关文章
- [Bootstrap]modal弹出框
写在前面 在实际开发中,为了友好,更需要一种美观的弹出框,js原生的alert,很难满足需求.这里推荐一个bootstrap的弹出框. 一个例子 先看效果吧 代码: <!DOCTYPE html ...
- Bootstrap:弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- Bootboxjs快速制作Bootstrap的弹出框效果
Bootboxjs是一个简单的js库,简单快捷帮你制作一个Bootstrap的弹出框效果. 一.简介 bootbox.js是一个小的JavaScript库,它帮助您在使用bootstrap框架的时候快 ...
- Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...
- Bootstrap popover弹出框
popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...
- 自定义Bootstrap样式弹出框
最近做的一些功能需要用到Bootstrap,然而原来的系统并没有引入Bootstrap,为了新写的控件能够应用于老的页面,又不需要在老的页面上引入全套的Bootstrap文件决定写一个模仿Bootst ...
- bootstrap的弹出框
data-toggle="popover";//以弹出框事件触发 data-content="弹出框中内容"; data-placement="弹出框 ...
随机推荐
- (转载)打破某些大牛比较呵呵的MySQL无file权限读root hash的谣言
如题.比如乌云社区发帖的这位大牛http://zone.wooyun.org/content/12432 看那帖子标题就很喜感有木有,大概意思就是创建了一个没有file权限的账户test,然后不能lo ...
- Android之View / SurfaceView / GLSurfaceView
Android游戏当中主要的除了控制类外就是显示类View.SurfaceView是从View基类中派生出来的显示类.android游戏开发中常用的三种视图是:view.SurfaceView和GLS ...
- [CF226E]Noble Knight's Path
[CF226E]Noble Knight's Path 题目大意: 一棵\(n(n\le10^5)\)个结点的树,初始时所有结点都是白色.\(m(m\le10^5)\)次操作,操作包含以下两种: 将点 ...
- [bzoj1024][SCOI2009]生日快乐 (枚举)
Description windy的生日到了,为了庆祝生日,他的朋友们帮他买了一 个边长分别为 X 和 Y 的矩形蛋糕.现在包括windy,一共有 N 个人来分这块大蛋糕,要求每个人必须获得相同面积的 ...
- MVC 3.0错误 HTTP 404您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确。
MVC3.0框架开发项目: 有时在程序运行的时候会出现“HTTP 404.您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用.请检查以下 URL 并确保其拼写正确.”的错 ...
- ios常用的字符串NSString自动释放理解
最近在做程序的时候,突然发现对于NSString的理解还是存在问题的.因此补充一片blog,希望对刚刚进入OC开发并搞不清楚内存泄露问题的人一点指引. 赋值: NSString * str = @&q ...
- POJ 1755 Triathlon (半平面交)
Triathlon Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4733 Accepted: 1166 Descrip ...
- hadoop招聘需求每天都在添加,短短半个月时间,需求量差点儿翻了一番,这是大数据要爆发的节奏么?
近期常常关注企业hadoop招聘需求的动态变化,多说无益,直接上几张百度的截图: 4月20日: 4月22日: 4月27日: 5月8日:
- 无线遥控器方案 Si4010/Si4012
Si4010包含一个嵌入式兼容8051微控制器(MCU),内具4 kB的RAM.8 kB的一次性编程(OTP)非易失性内存.一个128位EEPROM以及用于函数库(library)功能的12 kB R ...
- Replace Pioneer 试用推广
Replace Pioneer: http://www.mind-pioneer.com 目前合法长期使用Replace Pioneer的唯一方法(除了购买之外): Replace Pioneer过期 ...