# 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");
```
