通过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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
JavaScript对象属性操作实例解析
Feb 04 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
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
JavaScript获取URL汇总
2015/06/08 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
python实现学生管理系统
2018/01/11 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
python3图片文件批量重命名处理
2019/10/31 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
信息系统专业个人求职信范文
2013/12/07 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
房地产推广策划方案
2014/05/19 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
员工辞退通知书
2015/04/17 职场文书