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

2024-10-14 17:02:57

废话不多说，我就直接上代码吧！

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

点击按钮弹出模态框的一系列操作代码实例

实现功能提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮审核状态已通过:如果新增医院的经纬度没有填写,会提示填写经纬度,填写之后点击提交按钮,模态框中显示确定和取消按钮审核状态待审核:模态框中显示确定和取消按钮添加医院的html代码: <div class="form-group"> <label class="control-
通过layer实现可输入的模态框的例子

废话不多说,我就直接上代码吧! <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE HTML> <html lang="zh-CN"> <head> <me
使用layer模态框给新页面传值的方法

昨天用hui后台模板的时候用到模态框传值给另一个新页面模板是这么写的没办法给新页面传值,于是百度了一下,总结 function zhuyuan(title,url,id,w,h,type){ layer.open({ title:'添加分类', type: 2, area: ['700px', '530px'], fix: false, //不固定 maxmin: true, content: '{:url("yuyue/huayan")}?type=3', success:fun
bootstrap中模态框、模态框的属性实例详解

工作中有需要用到模态框的可以看看 <div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false
Bootstrap模态框案例解析

一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模
bootstrap模态框垂直居中效果

本文实例效果其实就是一个点击弹窗效果,供大家参考,具体内容如下先上jquery代码 //模态框垂直居中 function centerModals() { $('.modal').each( function(i) { var $clone = $(this).clone().css('display', 'block') .appendTo('body'); var top = Math.round(($clone.height() - $clone.find( '.modal-conten
BootStrap模态框和select2合用时input无法获取焦点的解决方法

在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1" 删掉(测试成功): <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myMod
bootstrap模态框消失问题的解决方法

小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打
Bootstrap模态框使用详解

本文实例为大家分享了Bootstrap模态框的两种使用状况,供大家参考,具体内容如下一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd"&g
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

效果图: 如图,这是使用Validator插件,所完成的功能,效果很强大,也很方便,这边推荐使用这种方式,最后介绍一下原始js验证写法. 首先,导入插件: <link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"

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

相关推荐

随机推荐