jQuery、layer实现弹出层的打开、关闭功能

2024-04-02 03:55:22

打开弹出层：

在list页面带入layer.js

在list页面点击时，弹出form弹出层，list.js：

$(".add_category,.update").click(function(){
    //弹出框
    var doMain = $('.domain_name').val();
    layer.open({
      shade: [0.5, '#000', false],
      type: 2,
      area: ['900px', '530px'],
      fix: false, //不固定
      maxmin: true,
      title: ['添加或修改用户类型', false],
      content: doMain+"/Stat/QueryUserCategoryForm.action?adminUserCategory.id="+$(this).val()
    });
  });

在点击form弹出层的“保存”按钮时，如果保存数据成功，则关闭弹出层，并且刷新list页面：

<span style="color:#000099;">submitHandler: function (form){
      $.post(
        $('.domain_name').val()+"/Stat/AddOrUpdateUserCategory.action",
        $(form).serialize(),
        function(data){
          var result = eval("("+data+")");
          if(!result.status){
            alert(result.message);
          }else{
            //添加数据成功，关闭弹出窗之前，刷新列表页面的数据
            parent.window.location.href=$('.domain_name').val()+"/Stat/QueryUserCategoryListStat.action";
            </span><span style="color:#ff6666;"> var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index); </span><span style="color:#000099;">
          }
        }
      );
    } </span>

以上所述是小编给大家介绍的jQuery、layer实现弹出层的打开、关闭功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

深入理解jQuery layui分页控件的使用

$.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d
基于LayUI分页和LayUI laypage分页的使用示例

本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m
layui文件上传实现代码

本文实例为大家分享了layui文件上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传</title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="st
layui表格实现代码

本文实例为大家分享了layui基本表格的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本表格</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <bod
layui中layer前端组件实现图片显示功能的方法分析

本文实例讲述了layer前端组件实现图片显示功能的方法.分享给大家供大家参考,具体如下: 实现图片显示功能:layer 1.在这里介绍一种layer前端组件 layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案, 致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 官网下载地址:http://layer.layui.com/ 或者点击此处本站下载. 里面有具体的使用方法这里注意几点:在使用layer前端组件之前,我们要引入layer的js文件 <script
layui导航栏实现代码

本文实例为大家分享了layui水平导航菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航与面包屑</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <
layui前段框架日期控件使用方法详解

本文实例为大家分享了layui-日期控件的实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body
layui弹出层效果实现代码

本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出层</title> <link rel="stylesheet" href="layui/css/layui.css" media="all"> &
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例

父层: jsp中: //页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面 <input type="hidden" id="getValue" name="getValue" value="" /> js代码: //设置function,当执行时,弹出子窗口并传递当前窗口名称 //弹出子窗口(选择商家) function choseMerchant() { //获取当前窗口名称 v
layui选项卡效果实现代码

本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body&

jQuery、layer实现弹出层的打开、关闭功能

相关推荐

随机推荐