首先需要准备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. django表单的Widgets

    不要将Widget与表单的fields字段混淆.表单字段负责验证输入并直接在模板中使用.而Widget负责渲染网页上HTML表单的输入元素和提取提交的原始数据.widget是字段的一个内在属性,用于定 ...

  2. [osg]OSG使用更新回调来更改模型

    使用回调类实现对场景图形节点的更新.本节将讲解如何使用回调来实现在每帧的更新遍历(update traversal)中进行节点的更新.        回调概览       用户可以使用回调来实现与场景 ...

  3. 《剑指offer》第四十一题（数据流中的中位数）

    // 面试题41:数据流中的中位数 // 题目:如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么 // 中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值, // ...

  4. Android接入微信SDK之一：发起微信授权登录

    1.重要的事情首先说! 包名.应用签名.app id 三者都必须和在腾讯上申请的一致!!!否则将不能成功. 包名:就是在腾讯上申请的包名 应用签名:使用微信官网提供的<签名生成工具>(这个 ...

  5. Codeforces 1006 F - Xor-Paths

    F - Xor-Path 思路: 双向搜索dfs 如果普通的搜索复杂度是n 那么双向搜索复杂度是√n 代码: #include<bits/stdc++.h> using namespace ...

  6. Python PyQt5 Pycharm 环境搭建及配置

    PyQt5相关安装 python 版本 python 3.6.3  1.安装PyQt5 执行命令: pip install pyqt5 2.安装PyQt5-tools 执行命令:pip install ...

  7. requests库使用：通过cookie跳过验证码登录，并用Session跨请求保持cookie

    拿我平时测试的一个系统为例,从UI层面来说必须先登录才可以进行后续操作,但是我在测试接口文档提供的接口时,发现并不需要登录,每个接口只要传参就可以正常返回.原因是我们这边专门弄了一个接口包来统一管理常 ...

  8. php安装soap等扩展的方式: 已经安装了php却发现少安装了一下扩展

    php安装soap等扩展的方式: 已经安装了php却发现少安装了一下扩展 1.首先确认下php.ini的安装位置 我的安装目录是: /usr/local/php 一般位置: /usr/local/ph ...

  9. MySQL事务（二）

    一.事务的隔离级别/锁问题 基本的介绍: 当我们的mysql表,被多个线程或者客户端同时操作时,mysql提供一种机制,可以让不同的事务在操作数据时,具有隔离性. 锁是计算机协调多个进程或线程并发访问 ...

  10. DP 传球问题

    洛谷P1057 传球问题 分析:经过m次传球到第i个人的方法可以由经过m-1次传球到第i个人和到第i-1个人传递得来 设dp[i][j]为经过j次传球后到达第i个人的方法数,可得到状态转移方程为: d ...