整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
什么是單例呢？
單，就是一個的意思。例：就是實例化出來的對象，那合在一起就是保證一個構造函數只能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小時內與您取得聯系。
