首先需要准备bootstrap.css，bootstrap .js  jquery

我这里有写好的下载地址如下：

https://pan.baidu.com/s/1miMahXe  秘钥：tgts

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>webrx-title</title>
<meta name="description" content="简介">
<meta name="keywords" content="关键字">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/materialize/css/materialize.min.css" media="screen,projection" />
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
<!-- Custom Styles-->
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>

<body>
<div class="btn btn-info" data-toggle="modal" data-target="#form">表单</div>
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">添加</h4>
</div>
<div class="modal-body">
<input placeholder="名称" id="first_name" type="text" class="inputIndex"><br/>
<input type="checkbox" class="filled-in" id="filled-in-box" checked="checked">
<label for="filled-in-box">隐藏网络不被发现</label><br/>
<select id="mySelect" style="display:block;">
<option>信号强度</option>
</select><br/>
<label>请选择文件</label><br/>
<input type="file" name=""/>
</div>
<div class="col-lg-12">
<button type="button" class="btn btn-primary pull-left" onClick="aa()">提交</button>
<!-- <button type="button" class="btn btn-default pull-right">重置</button> -->
</div>
<br/><br/>
<div class="modal-footer" style="display:none">

</div>
</div>
</div>
</div>
<div class="modal fade" id="processing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" >
<div class="modal-content">
<div class="modal-header" style="display:none"> </div><br/>
<div>
网络正在连接中，请稍等...
</div><br/><span class="btn" onClick="bb()">关闭</span>
<div class="modal-footer" style="display:none">

</div>
</div>
</div>
</div>

<script>

function aa(){
$("#form").modal("hide");
$("#processing").modal("show");
}
function bb(){
$("#processing").modal("hide");
}
</script>

</body>
</html>

bootstrap 弹框使用的更多相关文章

  1. bootstrap弹框

    http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找 ...

  2. bootstrap 弹框

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  3. bootstrap弹框去除遮罩层效果

    是通过css解决这个问题,核心css代码如下: .modal-backdrop { filter: alpha(opacity=)!important; opacity: !important; } ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  6. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

  7. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  8. Bootstrap 模态框(也可以说的弹出层)

    最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...

  9. bootstrap弹出框

    要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...

随机推荐

  1. Python缩进与if语句 空格的魅力

    缩进 Python最具特色的是用缩进来标明成块的代码.我下面以if选择结构来举例.if后面跟随条件,如果条件成立,则执行归属于if的一个代码块. 先看C语言的表达方式(注意,这是C,不是Python! ...

  2. es6 export 和export default的区别

    区别 export 每个文件中可使用多次export命令 import时需要知道所加载的变量名或函数名 import时需要使用{},或者整体加载方法 export export default 每个文 ...

  3. Spark Streaming笔记

    Spark Streaming学习笔记 liunx系统的习惯创建hadoop用户在hadoop根目录(/home/hadoop)上创建如下目录app 存放所有软件的安装目录 app/tmp 存放临时文 ...

  4. P359 usestock2.cpp

    IDE Qt Creator 4.0.3 stock.h #ifndef STOCK_H #define STOCK_H #include <string> class Stock //类 ...

  5. QTableWidget自定义表头QHeaderView加全选复选框

    1         QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...

  6. python Django 项目创建

    注:后续如不特色说明,使用python版本均为python3 创建项目 django-admin startproject projectName 启动服务 python manage.py runs ...

  7. Google Map 谷歌地图

    <script> var map; function initMap() { var position = new google.maps.LatLng(1.539187, 103.647 ...

  8. java ----> 类转换异常

    com.rr.domain.Department_$$_javassist_5 cannot be cast to javassist.util.proxy.Proxy 两个原因: 1.懒加载 在we ...

  9. 【WPF】 Behavior

    Hello,Behavior   引言         在看PDC-09大会的视频时,其中一篇讲利用Blend来扩展Silverlight元素的行 为,当时感觉很酷:在Blend中,将MouseDra ...

  10. ionic this.navCtrl.push()和this.navCtrl.pop()

    在ionic中,this.navCtrl.push()和this.navCtrl.pop()都是进行页面跳转,但是用法又有区别 例如有A  B  C三个页面,三个页面都是使用this.navCtrl. ...