bootstrap弹框
http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框
做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找别人弹框来用,终于发现个现成的 ,bootstrap代码复制过来就可以弹框了,对于做后端的,真是太好了。 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script> <!-- Button trigger modal -->
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">
Launch demo modal
</button> <!-- Modal -->
<div class="modal " 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"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary submit">保存</button>
</div>
</div>
</div>
</div>
</body>
</html> <script type="text/javascript">
$(".submit").click(function(){
alert(4444444444);
})
</script>
bootstrap弹框的更多相关文章
- bootstrap 弹框
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- bootstrap 弹框使用
首先需要准备bootstrap.css,bootstrap .js jquery 我这里有写好的下载地址如下: https://pan.baidu.com/s/1miMahXe 秘钥:tgts & ...
- bootstrap弹框去除遮罩层效果
是通过css解决这个问题,核心css代码如下: .modal-backdrop { filter: alpha(opacity=)!important; opacity: !important; } ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- Bootstrap弹出框(modal)垂直居中
最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- Bootstrap 模态框(也可以说的弹出层)
最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...
- bootstrap弹出框
要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...
随机推荐
- ceph calamari 监控系统安装 on ubuntu 14.04
在 ubuntu 14.04 上安装ceph calamari时,遇到calamari web界面中node server可以正常添加,但cluster 集群无法显示的问题. 经过定位,是因为salt ...
- jenkins 把包传到远程服务器上
首先我们在 一台服务器上部署svn,maven,jdk,tomcat,nexus,还有Jenkins. 这里我主要记录Jenkins. 首先我们从网上下载Jenkins的包 wget http://m ...
- iOS开发小技巧--TextField的细节处理,键盘中return键的处理
一.TextField取消自动纠错和设置自身对应键盘的return键盘的样式 二.程序运行过程中,监听return键点击,实现相应操作
- mysql-删除日志文件命令详解
装载 在mysql中会生大量的如mysq-bin.000001这类日志文件了,这些都是二进制文件了,如果我们是普通的日志没有进行主从配置就可以直接使用reset master进行删除了这个方法很简单, ...
- Fresco内存机制(Ashmem匿名共享内存)
Fresco的内存机制 Fresco是Facebook出品的高性能图片加载库,采用了Ashmem匿名共享内存机制, 来解决图片加载中的OOM问题.这里不对Fresco做深入分析,只关注Fresco在A ...
- servlet监听器Listener(理论+例子)
Listener采用了观察者模式(24种模式之一),Listener是servlet的监听器,他可以监听客户端的请求.服务器端的操作等, 通过监听器,可以自动激发一些操作.比如:监听在线用户数量 当增 ...
- linux-shell编程笔记01
==============常用命令 env echo $path export ------------- cp mv mkdir rm ------------- cd ls ll ------- ...
- 欢迎加入.Net高级部落 173844862
本群成立至今3年多,聚集了好多大牛级别的人物,欢迎高手前来指教,也欢迎小菜鸟进来学习.群成员热情开朗,有问必答.在这里聊聊技术,谈谈理想,不光技术会得到提高,也会收获一大帮志同道合的朋友,希望在未来的 ...
- Python 中文编码问题小结
1. 下面的语句要放在代码开头,指定文件编码, 可以识别 脚本中的所有字符和中文. # -*- coding:utf-8 -*- 2. codecd 编码转换 如果想要读取文本中的中文,需要借助于co ...
- PHP漏洞全解
针对PHP的网站主要存在下面几种攻击方式: 1.命令注入(Command Injection) 2.eval注入(Eval Injection) 3.客户端脚本攻击(Script Insertion) ...