通过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 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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
DIY实用性框形天线
2021/03/02 无线电
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
PHP经典面试题集锦
2015/03/19 PHP
php 多文件上传的实现实例
2016/10/23 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
令人印象深刻的自荐信
2014/05/25 职场文书
建筑安全生产责任书
2014/07/22 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
世界遗产导游词
2015/02/13 职场文书
自荐信模板大全
2015/03/27 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书