通過layer實(shí)現(xiàn)可輸入的模態(tài)框的例子
更新時(shí)間：2019年09月27日 09:16:01 作者：Coding_Boy36
今天小編就為大家分享一篇通過layer實(shí)現(xiàn)可輸入的模態(tài)框的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
廢話不多說，我就直接上代碼吧！
<%@ 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>模態(tài)框---父層</title>
<%--<link rel="stylesheet" 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="彈出模態(tài)框" ο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;">
狀態(tài)(<label style="color: red">*</label>)：
<select name="userState" id="userState">
<option value="40">正常</option>
<option value="30">禁言</option>
<option value="20">關(guān)閉</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>手機(jī)(<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">
/*彈出模態(tài)框*/
function check() {
layer.open({
type: 1,
title: '用戶信息',
area: ['700px', '700px'],
shadeClose: false, //點(diǎn)擊遮罩關(guān)閉
content: $('#addmain'),
btn: ['確定', '取消'],
yes: function (index, layero) {//添加人員
//做數(shù)據(jù)校驗(yàn)
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("請?jiān)O(shè)置密碼！");
}else if(password.length>0&&(password.length<8||reg.test(password)||!isNaN(password)||password.length>20)){
layer.msg("密碼應(yīng)在8位至20位之間，且為數(shù)字與字母的組合！");
}else if(!mobile){
layer.confirm("手機(jī)不能為空！");
}else if(!mobilereg.test(mobile)){
layer.msg("請輸入有效的手機(jī)號(hào)！");
} else if(!email){
layer.msg("郵箱不能為空！");
}else if(!eamilreg.test(email)){
layer.msg("請輸入有效的郵箱！");
} else if(description&&description.length>500){
layer.msg("描述文字不能超過500個(gè)漢字！");
}else{
$("#adduser").submit();
}
},
btn2: function (index, layero) {
return;
},
cancel: function () {
return;
},
end: function () {
$('#addmain').css("display", "none");
}
});
}
</script>
</body>
</html>
以上這篇通過layer實(shí)現(xiàn)可輸入的模態(tài)框的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
一些實(shí)用的TAB效果...2006-11-11
javascript設(shè)置連續(xù)兩次點(diǎn)擊按鈕時(shí)間間隔的方法
這篇文章主要介紹了javascript設(shè)置連續(xù)兩次點(diǎn)擊按鈕時(shí)間間隔的方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
對(duì)比分析Django的Q查詢及AngularJS的Datatables分頁插件
通過本文給大家對(duì)比分析了Django的Q查詢及AngularJS的Datatables分頁插件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
uniapp項(xiàng)目實(shí)踐自定義加載組件示例詳解
這篇文章主要為大家介紹了uniapp項(xiàng)目實(shí)踐自定義加載組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
通過event對(duì)象的fromElement屬性解決熱區(qū)設(shè)置主實(shí)體的一個(gè)bug
后臺(tái)的熱區(qū)管理中，如果鼠標(biāo)移到熱區(qū)上，會(huì)顯示一個(gè)提示框，提示框里“設(shè)為主實(shí)體”、“刪除”和“合并”等超鏈接，點(diǎn)擊這些超鏈接可以進(jìn)行各種操作。2008-12-12
JavaScript Array Flatten 與遞歸使用介紹
用 JavaScript 將 [1,2,3,[4,5, [6,7]], [[[8]]]] 這樣一個(gè) Array 變成 [1,2,3,4,5, 6,7,8] 呢？傳說中的 Array Flatten2011-10-10
ES6中Array.find()和findIndex()函數(shù)的用法詳解
ES6為Array增加了find()，findIndex函數(shù)。find()函數(shù)用來查找目標(biāo)元素，找到就返回該元素，找不到返回undefined，而findIndex()函數(shù)也是查找目標(biāo)元素，找到就返回元素的位置，找不到就返回-1。下面通過實(shí)例詳解，需要的朋友參考下吧2017-09-09
本文主要介紹了分別使用javascript，jquery，css實(shí)現(xiàn)瀑布流布局的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
JS實(shí)現(xiàn)的省份級(jí)聯(lián)實(shí)例代碼
這篇文章主要介紹了js下省份級(jí)聯(lián)效果，需要的朋友可以參考一下2013-06-06
微信小程序?qū)崿F(xiàn)獲取用戶信息替換用戶名和頭像到首頁
本文詳細(xì)講解了微信小程序?qū)崿F(xiàn)獲取用戶信息替換用戶名和頭像到首頁的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06