整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
什么是单例呢？
单，就是一个的意思。例：就是实例化出来的对象，那合在一起就是保证一个构造函数只能new出一个实例，为什么要学习单例模式呢？或者说单例模式有哪些常见的应用场景.它的使用还是很广泛，比如：弹出一个模态框，一般来说在网站中弹出的模态框，不停的一直点击，一般只能创建一个。还有后台的数据库连接，一般都是保证一个连接等等。今天的主题就是单例在模态框中的应用，我们先要搞清楚，怎么弄个单例出来。
我们先看下普通的构造函数加原型方式。下面这种是常见的方式
每次new都会在内存中生成一块新的内存区域保存新的实例，所以这种方式就不能保证只能new出一个单例，所以，我们想要创建一个单例，就要能够控制new创建实例的过程！！！，这就是单例的关键，那么要控制这个过程，肯定不能让用户直接调用构造函数，所以我们要另外想办法.
第一种办法： 在函数中添加一个静态方法，来控制创建实例的过程
第8行判断ins这个变量是否保存了一个实例，如果没有就new一个，否则直接返回。第二次在调用的时候，由于已经存在了ins，所以直接返回，就不需要在new了，这要就能确保是单例
第二种办法：利用闭包和立即表达式的特性
这两种方法都可以，接下来，我就选择第二种方法来实现弹出单一的模态框
样式：
html:
js部分：
html:
在Module.one中通过变量isExist的两种状态和闭包特性控制元素只能被添加一次
出处:http://www.cnblogs.com/ghostwu
bootstrap框架中，使用模态框（modal）的弹窗组件需要三层 div 容器元素，分别为：
1. 外层：modal（模态声明层）。
2. 中间层：dialog（窗口声明层）。
3. 内层：content（内容层）。在内容层里面，还包含三层，分别为 header(头部)、body(主体)、footer(注脚)。
案例效果如下：
说明：案例中设置按钮的数据切换方式（data-toggle）是modal，数据目标（data-target）指向模态框的id（mod1）。
网页文件modal.html的代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>模态框插件</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
font-size:14px;
}
</style>
</head>
<body>
<!--tabindex="-1"表示关闭焦点，使得按esc键也可以关闭打开的对话框 -->
<div class="modal fade" id="mod1" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">用户登陆</h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">用户名：</span>
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
<p></p>
<div class="input-group">
<span class="input-group-addon">密 码：</span>
<input type="password" class="form-control" placeholder="请输入密码">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注册</button>
<button class="btn btn-primary">登陆</button>
</div>
</div>
</div>
</div>
<hr>
<button class="btn btn-primary" data-toggle="modal" data-target="#mod1">用户登陆</button>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
至此，案例制作完成。
flex 模态框弹窗浮动垂直水平居中
- position:fixed 定位
- 元素的位置相对于浏览器窗口是固定位置。
- 即使窗口是滚动的它也不会移动;
HTML 代码实例
```
*请认真填写需求信息，我们会在24小时内与您取得联系。
