通过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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
jquery ready函数源代码研究
Dec 06 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
uni app仿微信顶部导航条功能
Sep 17 Javascript
详解JavaScript执行模型
Nov 16 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判断网页是否gzip压缩
2013/06/25 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
phpStorm2020 注册码
2020/09/17 PHP
htm调用JS代码
2007/03/15 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python Gitlab Api 使用方法
2019/08/28 Python
np.random.seed() 的使用详解
2020/01/14 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
求职者应聘的自我评价
2013/10/16 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书