# Niushop開源商城后臺彈框
---
**niushop彈框以及彈框后表單提交功能開發**
### 1. **彈框樣式，niushop采用bootstrap的模態框彈框樣式，class樣式為：modal fade hide代碼實例：**
```php
<div class="modal fade hide" id="add_user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>添加會員</h3>
</div>
<div class="modal-body">
<div class="modal-infp-style">
<table class="modal-tab">
<tr>
<td style="width:20%;"><span class="required">*</span>用戶名</td>
<td colspan='3'>
<input type="text" id="username" class="input-common" />
<span id="username_verify"></span>
<input type="hidden" value="不存在" id="isset_username" class="input-common" />
</td>
</tr>
<tr>
<td><span class="required">*</span>登錄密碼</td>
<td colspan='3'><input type="password" id="password" class="input-common"></td>
</tr>
<tr>
<td style="width:22%;"><span class="required">*</span>昵稱</td>
<td colspan='3'>
<input type="text" id="nickname" class="input-common" />
</td>
</tr>
<tr>
<td>會員等級</td>
<td colspan='3'>
{if $level_list['data']}
<select id="member_level" class="select-common">
{foreach name="level_list['data']" item="vo"}
<option value="{$vo.level_id}">{$vo.level_name}</option>
{/foreach}
</select>
{else/}
<span>暫無會員等級</span>
{/if}
</td>
</tr>
<tr>
<td>會員標簽</td>
<td colspan='3'>
{if $label_list['data']}
<select id="member_label" class="select-common">
{foreach name="label_list['data']" item="vo"}
<option value="{$vo.id}">{$vo.label_name}</option>
{/foreach}
</select>
{else/}
<span>暫無會員標簽</span>
{/if}
</td>
</tr>
<tr>
<td>手機號碼</td>
<td colspan='3'><input type="text" id="telephone" class="input-common"/><span id="telephone_verify"></span></td>
</tr>
<tr>
<td>郵箱地址</td>
<td colspan='3'><input type="text" id="member_email" class="input-common" /><span id="member_email_verify"></span></td>
</tr>
<tr>
<td>性別</td>
<td>
<label class="radio inline normal"><i class="radio-common selected"><input type="radio" checked="checked" name="sex" value="1"/></i>
<span>男</span></label>
<label class="radio inline normal"><i class="radio-common"><input name="sex" type="radio" value="2"/></i>
<span>女</span></label>
<label class="radio inline normal"><i class="radio-common"><input name="sex" type="radio" value="0"/></i>
<span>保密</span></label>
</td>
</tr>
<tr>
<td>賬戶狀態</td>
<td>
<label class="radio inline normal"><i class="radio-common selected"><input type="radio" checked="checked" name="status" value="1"/></i>
<span>正常</span></label>
<label class="radio inline normal"><i class="radio-common"><input name="status" type="radio" value="0"/></i>
<span>鎖定</span></label>
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button class="btn-common btn-big" onclick="addUser()">保存</button>
<button class="btn-common-cancle btn-big" data-dismiss="modal">關閉</button>
</div>
</div>
</div>
</div>
```
```
```
### **2. 模態框默認隱藏，通過id調用顯示，例如上述實例點擊彈出與關閉**
```
$("#add_user").modal("show");
<button class="btn-common-cancle btn-big" data-dismiss="modal">關閉</button>
```
### **3. 彈出之后可以編輯表單提交數據,例如上述addUser，包括數據接收，數據驗證，提交，接收返回結果等**
```js
//添加會員
function addUser(){
var username = $("#username").val();
var nickname = $("#nickname").val();
var password = $("#password").val();
var level_name = $("#member_level").val();
var member_label = $("#member_label").val();
var tel = $("#telephone").val();
var email = $("#member_email").val();
var sex = $("input[name='sex']:checked").val();
var status = $("input[name='status']:checked").val();
if (username == '') {
showTip('用戶名不能為空','warning');
return;
}
if(!checkUserName(username)){
showTip('用戶名已存在','warning');
return;
}
if (password == null || password.length < 6) {
showTip('密碼必須不小于6位！','warning');
return;
}
if (nickname == '') {
showTip('昵稱不能為空','warning');
return;
}
if(tel.length > 0){
if(!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(tel))){
showTip("手機號碼有誤，請重填",'warning');
return;
}
if(checkMobile(tel)){
showTip('該手機號碼已存在','warning');
return;
}
}
if(email.length > 0){
if(!(/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(email))){
showTip('郵箱錯誤,請重填','warning');
return;
}
if(checkEmail(email)){
showTip('該郵箱已存在','warning');
return;
}
}
$.ajax({
type : "post",
url : __URL("ADMIN_MAIN/member/addmember"),
data : {
'username' : username,
'nickname' :nickname,
'password' : password,
'level_name' : level_name,
'member_label' : member_label,
'tel' : tel,
'email' : email,
'sex' : sex,
'status' : status
},
success : function(data) {
if (data['code'] > 0) {
showTip(data['message'],'success');
$("#add_user").modal("hide");
LoadingInfo(getCurrentIndex(1,'#productTbody'));
} else {
showTip(data['message'],'error');
flag = false;
}
}
});
}
```
```php
return view($this->style . "Dbdatabase/dataBaseList");
```
