首先需要准备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 操作剪切板

    python3 在使用网上找到的一些使用剪切板的片段时发现存在写入剪切板后乱码的情况, 研究后发现python3不能使用SetClipboardData方法, 要使用SetClipboardText ...

  2. 前端阶段_div以及css介绍

    1.div div是html的一个标签,是块级元素,单独使用没有意义,必须结合css来使用,进行网页布局 2.span span是一个html标签,是一个内联元素,主要对括起来的内容进行修饰 3.&l ...

  3. C#引用出错

    今天有朋友问我为什么自己引用了配置文件,但是还不能使用配置文件呢? 之后我查看他的项目,后来发现如下问题,并且总结引用文件流程如下: 引用文件的完整程序如下: 用配置文件举例 项目中的引用右击,然后点 ...

  4. 力扣（LeetCode）258. 各位相加

    给定一个非负整数 num,反复将各个位上的数字相加,直到结果为一位数. 示例: 输入: 38 输出: 2 解释: 各位相加的过程为:3 + 8 = 11, 1 + 1 = 2. 由于 2 是一位数,所 ...

  5. Codeforces 600 E - Lomsat gelral

    E - Lomsat gelral 思路1: 树上启发式合并 代码: #include<bits/stdc++.h> using namespace std; #define fi fir ...

  6. python中简单的递归（断点报错的小福利）

    首先要先理解什么是递归? 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 下面讲了一个很简单的递归函数 def clac(n): print(n) if int( ...

  7. LeetCode--290--单词模式

    问题描述: 给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循相同的模式. 这里的遵循指完全匹配,例如, pattern 里的每个字母和字符串 str 中的每个非空单词之 ...

  8. hdu-3001 三进制状态压缩+dp

    用dp来求最短路,虽然效率低,但是状态的概念方便解决最短路问题中的很多限制,也便于压缩以保存更多信息. 本题要求访问全图,且每个节点不能访问两次以上.所以用一个三进制数保存全图的访问状态(3^10,空 ...

  9. Bipartite Segments CodeForces - 901C (区间二分图计数)

    大意: 给定无向图, 无偶环, 每次询问求[l,r]区间内, 有多少子区间是二分图. 无偶环等价于奇环仙人掌森林, 可以直接tarjan求出所有环, 然后就可以预处理出每个点为右端点时的答案. 这样的 ...

  10. drozer安装出现的问题

    首先先检查你的手机或者模拟器是否开启了drozer agent 安装出现的问题: (1)找不到java路径: 解决方法:新建一个TXT文件,在文件中写如下内容: [executables] java ...