Bootstrap模态框按钮
1.触发模态框弹窗的代码
这里复制了一段Bootstrap模态框的代码
<h2>创建模态框(Modal)</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<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">×</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</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>
其中,触发模态框的按钮是下面这句代码
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
data-toggle="modal"是触发模态框的具体代码,去掉之后点击该按钮模态框不会弹出,也可以在里面用ajax写点击事件。
2.提交表单的功能
<form action="chuli.php" method="post">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
</form>
当点击“开始演示模态框”按钮时,会提交form表单,某些时候不需要这个按钮有提交表单的功能,就在里面加上type="button".
<form action="chuli.php" method="post">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
</form>
Bootstrap模态框按钮的更多相关文章
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- 去除bootstrap模态框半透明阴影
当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...
- BootStrap 模态框基本用法
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...
- 使用bootstrap模态框实现浮动层
authour: 陈博益 updatetime: 2015-04-22 06:52:15 friendly link: http://v3.bootcss.com/javascript/#modals ...
- bootstrap模态框垂直居中
很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...
- 前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
- bootstrap模态框手动关闭遮盖层不消失
模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...
- 基于bootstrap模态框的日期选择器
近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
随机推荐
- 3D坦克大战游戏源码
3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...
- 搞不清FastCgi与PHP-fpm之间是个什么样的关系?
问 我在网上查fastcgi与php-fpm的关系,查了快一周了,基本看了个遍,真是众说纷纭,没一个权威性的定义. 网上有的说,fastcgi是一个协议,php-fpm实现了这个协议: 有的说,php ...
- 使用rsync同步目录
本文描述了linux下使用rsync单向同步两个机器目录的问题. 使用rsync同步后可以保持目录的一致性(含删除操作). 数据同步方式 从主机拉数据 备机上启动的流程 同步命令: rsync -av ...
- 搭建高可用的rabbitmq集群 + Mirror Queue + 使用C#驱动连接
我们知道rabbitmq是一个专业的MQ产品,而且它也是一个严格遵守AMQP协议的玩意,但是要想骚,一定需要拿出高可用的东西出来,这不本篇就跟大家说 一下cluster的概念,rabbitmq是erl ...
- Select into 的特点
使用 Select * into NewTable From OldTable 来生成新表的技能已经使用得好熟练了~但是有些东西还是需要注意一下.下面我就来分享几个栗子 使用select into ...
- 编译安装zabbix3.2
1.1 环境准备 系统环境准备:redhat 6.6 64位mysql-5.6.34php-5.6.28zabbix-3.2.1配置前先关闭iptables和SELINUX,避免安装过程中报错. # ...
- ubuntu kylin 14.04安装配置redis-2.8.9(转)
1.下载安装文件加压.编译和安装 cd /tmpwget http://download.redis.io/releases/redis-2.8.9.tar.gztar -zxf redis-2.8. ...
- Microsoft SQL Server 2008 R2 安装卸载
问题 问题1 标题: Microsoft SQL Server 2008 R2 安装程序 ------------------------------ 出现以下错误: Could not open k ...
- 第10章 Shell编程(2)_字符截取命令
2. 字符截取命令 2.1 cut字段提取命令(grep提取行,cut提取列) (1)cut命令:#cut [选项] 文件名 选项: -f 列号:提取第几列: -d 分隔符:按照指定分隔符分割列,默认 ...
- 【repost】js中(function(){…})()立即执行函数写法理解
摘要: javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ...