通过layer实现可输入的模态框的例子


Posted in Javascript onSeptember 27, 2019

废话不多说,我就直接上代码吧!

<%@ 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实现可输入的模态框的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
jQuery返回定位插件详解
May 15 jQuery
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
vue调用语音播放的方法
Sep 27 #Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 #Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 #Javascript
vue实现在线翻译功能
Sep 27 #Javascript
webpack 处理CSS资源的实现
Sep 27 #Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 #Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 #Javascript
You might like
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
Laravel 队列使用的实现
2019/01/08 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
python创建列表并给列表赋初始值的方法
2015/07/28 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
大学四年学习的自我评价分享
2013/12/09 职场文书
家长对孩子的感言
2014/03/10 职场文书
机关会计岗位职责
2014/04/08 职场文书
环保倡议书
2014/04/14 职场文书
银行员工考核评语
2014/12/31 职场文书
年会邀请函范文
2015/01/30 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
材料员岗位职责范本
2015/04/11 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
步步惊心观后感
2015/06/12 职场文书
体育教师研修感悟
2015/11/18 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Python语言内置数据类型
2022/02/24 Python
Python必备技巧之函数的使用详解
2022/04/04 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL