废话不多说，我就直接上代码吧！
<%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\" %>
<%@ taglib prefix=\"s\" uri=\"/struts-tags\" %>
<!DOCTYPE HTML>
<html lang=\"zh-CN\">
<head>
<meta charset=\"utf-8\">
<meta name=\"format-detection\" content=\"telephone=no\" />
<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">
<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">
<meta name=\"viewport\" content=\"width=640, target-densitydpi=device-dpi, user-scalable=no\"/>
<meta HTTP-EQUIV=\"Pragma\" CONTENT=\"no-cache\">
<meta HTTP-EQUIV=\"Expires\" CONTENT=\"-1\">
<title>模态框---父层</title>
<%--<link rel=\"stylesheet\" href=\"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"external nofollow\" >--%>
<link type=\"text/css\" rel=\"stylesheet\" href=\"${contextPath}/content/css/componnentWin.css\" rel=\"external nofollow\" >
<meta name=\"description\" content=\"\" />
<meta name=\"keywords\" content=\"\" />
<style>
#addmain {
display: none;
}
</style>
</head>
<body>
<input type=\"button\" id=\"submit\" value=\"弹出模态框\" οnclick=\"check()\">
<div id=\"addmain\">
<div style=\"padding:10px;padding-left:60px;padding-top:40px;\">
<lable>姓名(<label style=\"color: red\">*</label>)：<input type=\"text\" style=\"width:500px;height:30px;\" name=\"realName\" id=\"realName\"></lable>
</div>
<div style=\"padding:10px;padding-left:60px;;padding-top:20px;\">
部门(<label style=\"color: red\">*</label>)：
<select name=\"deptId\" id=\"deptId\">
</select>
岗位(<label style=\"color: red\">*</label>)：
<select name=\"positionId\" id=\"positionId\">
</select>
</div>
<div style=\"padding:10px;padding-left:60px;padding-top:20px;\">
<lable>账户(<label style=\"color: red\">*</label>)：<input type=\"text\" style=\"width:500px;height:30px;\" name=\"username\" id=\"username\"></lable>
</div>
<div style=\"padding:10px;padding-left:60px;padding-top:20px;\">
<lable>密码(<label style=\"color: red\">*</label>)：<input type=\"password\" style=\"width:500px;height:30px;\" name=\"password\" id=\"password\"></lable>
</div>
<div style=\"padding:10px;padding-left:60px;;padding-top:20px;\">
状态(<label style=\"color: red\">*</label>)：
<select name=\"userState\" id=\"userState\">
<option value=\"40\">正常</option>
<option value=\"30\">禁言</option>
<option value=\"20\">关闭</option>
<option value=\"10\">删除</option>
</select>
<label class=\"control-label\">头像
<input type=\"file\" id=\"avator\" name=\"pic\"
style=\"opacity:0;z-index:9;height:60px;width:180px;position:absolute;\">
</label>
</div>
<div style=\"padding:10px;padding-left:60px;padding-top:20px;\">
<lable>手机(<label style=\"color: red\">*</label>)：<input type=\"text\" style=\"width:500px;height:30px;\" name=\"mobile\" id=\"mobile\"></lable>
</div>
<div style=\"padding:10px;padding-left:60px;padding-top:20px;\">
<lable>邮箱(<label style=\"color: red\">*</label>)：<input type=\"text\" style=\"width:500px;height:30px;\" name=\"email\" id=\"email\"></lable>
</div>
<div style=\"padding:10px;padding-left:60px;;padding-top:20px;\">
描述：
<textarea name=\"description\" style=\"width: 500px;height: 80px;margin-left: 10px;\" id=\"description\"></textarea>
</div>
</div>
<script type=\"text/javascript\" src=\"http://front.01event.com/cdn/js/jquery-1.7.2.min.js\"></script>
<script type=\"text/javascript\" src=\"http://res.wx.qq.com/open/js/jweixin-1.0.0.js\"></script>
<script type=\"text/javascript\" src=\"${contextPath}/content/js/layer/layer.js\"></script>
<script type=\"text/javascript\">
/*弹出模态框*/
function check() {
layer.open({
type: 1,
title: \'用户信息\',
area: [\'700px\', \'700px\'],
shadeClose: false, //点击遮罩关闭
content: $(\'#addmain\'),
btn: [\'确定\', \'取消\'],
yes: function (index, layero) {//添加人员
//做数据校验
var eamilreg = /^([a-zA-Z0-9]+[_|\\_|\\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\\_|\\.]?)*[a-zA-Z0-9]+\\.[a-zA-Z]{2,3}$/;
var reg= /^[A-Za-z]+$/;
var mobilereg = /^1[34587][0-9]{9}$/;
var id=$(\"#id\").val();
var realName=$(\"#realName\").val();
var description=$(\"#description\").val();
var deptId=$(\"#deptId\").val();
var positionId=$(\"#positionId\").val();
var userState=$(\"#userState\").val();
var email=$(\"#email\").val();
var mobile=$(\"#mobile\").val();
var password=$(\"#password\").val();
var username=$(\"#username\").val();
if(!realName){
layer.confirm(\"姓名不能为空！\");
}else if(!deptId){
layer.msg(\"请选择部门！\");
}else if(!username){
layer.msg(\"账户不能为空！\");
}else if(!password&&!id){
layer.msg(\"请设置密码！\");
}else if(password.length>0&&(password.length<8||reg.test(password)||!isNaN(password)||password.length>20)){
layer.msg(\"密码应在8位至20位之间，且为数字与字母的组合！\");
}else if(!mobile){
layer.confirm(\"手机不能为空！\");
}else if(!mobilereg.test(mobile)){
layer.msg(\"请输入有效的手机号！\");
} else if(!email){
layer.msg(\"邮箱不能为空！\");
}else if(!eamilreg.test(email)){
layer.msg(\"请输入有效的邮箱！\");
} else if(description&&description.length>500){
layer.msg(\"描述文字不能超过500个汉字！\");
}else{
$(\"#adduser\").submit();
}
},
btn2: function (index, layero) {
return;
},
cancel: function () {
return;
},
end: function () {
$(\'#addmain\').css(\"display\", \"none\");
}
});
}
</script>
</body>
</html>
以上这篇通过layer实现可输入的模态框的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容