首先需要准备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 day2_int以及string的常见方法1_笔记

    Python中,主要的基本类型有:数字(int型).字符串(string型).列表(list型).元祖(tuple型).字典(direct型).布尔值(boolean型) 1.int型 1.强转int ...

  2. 从DFS到记忆化DFS到动态规划

    什么是动态规划? 动态规划(Dynamic Programming)是通过组合子问题的解来解决问题的.动态规划是用于求解包含重叠子问题的最优化问题的方法.其基本思想是,将原问题分解为相似的子问题.在求 ...

  3. BootStrap table隐藏列两种方式 (踩坑)

    1.第一种  利用 visible 属性 { field : 'userAccount', title : '订阅人', visible : visible(), formatter:function ...

  4. Codeforces 920F - SUM and REPLACE

    920F - SUM and REPLACE 思路1: 线段树(982 ms) 每个点最多更新6次 代码: #include<bits/stdc++.h> using namespace ...

  5. Asp.net core 学习笔记 ( Web Api )

    asp.net core 把之前的 webapi 和 mvc 做了结合. mvc 既是 api. 但是后呢,又发现, api 确实有独到之处,所以又开了一些补助的方法. namespace Proje ...

  6. idel 快捷键 记录

    1.找到实现一个类或者接口子类的快捷键 ctrl + B父类或父方法定义 ctrl + alt + B子类或子方法实现 2.跳转上次 下次 操作 ctrl + alt + -->  / < ...

  7. Java 反射(简单捋一下)

    有Student类,Person类,还有一个叫Class的类,这是反射的源头. 正常方式:通过完整的类名 > 通过new实例化 > 取得实例化对象 反射方式:实例化对象 > getC ...

  8. [Win10]安装msi时2503，2502错误及其解决

    简述 刚安装了win10系统,在安装TortoiseGit和TortoiseSvn时,这两个软件是.msi后缀的安装文件,在点击安装时老是提示2503,2502错误,因此无法安装上 搜索了下一般都提到 ...

  9. WPF——UI布局

    1.规划整体布局(规划界面结构)——>这样就可以划分出若干区域(区域的控件通常是一些容器控件) 2.针对 上面的 “若干区域” ,制作每个区域的一级用户控件(然后,将该用户控件放入对应的区域中) ...

  10. H3C S6800交换机 BCM shell命令

    H3C S6800交换机 BCM shell命令 http://wgli978.blog.163.com/blog/static/13592877220172315858831/ <H3C> ...