bootstrap model弹出框的使用

原文地址为： bootstrap model弹出框的使用

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

效果：

代码：
<input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx"/>

<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>

注意：如果要给model设置宽度，那必须得加上布局。就是把model放在下面的代码块中，并且设置model的宽度。style="width:500px".对了，你还不可以用span样式直接放到class里面。。

转载请注明本文地址： bootstrap model弹出框的使用

bootstrap model弹出框的使用相关推荐

Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打 ...
jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
Bootstrap方法为页面添加一个弹出框
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件学习要点: 1.弹出框 2.警告框本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的 ...
bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
php使用popover,php中bootstrap框架.popover弹出框，鼠标移动到上面自动显示，离开自动消失...
$(function(){//显示弹出框 $("[rel=name]").popover({ trigger:'manual', placement : 'bottom', //p ...
弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

bootstrap model弹出框的使用

bootstrap model弹出框的使用相关推荐

最新文章

热门文章