解决layer弹出层的内容页点击按钮跳转到新的页面问题


Posted in Javascript onSeptember 14, 2019

在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面。

导入页按钮:

<button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button>

导入按钮的点击事件,点击后会出现layer弹出层

$("#start").click(function(){
   // 判断有没有选择区域
   var regionCode = $("#regionCode").val();
   if(regionCode!=0){
    // 获取区域名,用于导入成功后标题显示
    var regionName = $("#regionCode").find("option:selected").text();
    $.ajax({
     url:'<%=path%>/org/importMemoryOrgs?regionCode='+regionCode,
     type:'post',
     dataType:'json',
     success:function(res){
      console.log("成功");
      console.log(res);
      // 引导用户再次进入导入页,验证效果是下拉框不显示曾经导入过的区域
      if(res.success == true){
       layer.open({
        type: 2 
        , title: regionName+'党组织架构导入成功'
        //, area: ['690px', '350px']
        , area: ['750px', '50%']
        , shade: 0.5
        , maxmin: true
        , content: '<%=path%>/orgAdminLoginPage?username='+regionCode
       });
      }else{
       layer.open({
        type: 1 //此处以iframe举例
        , title: regionName+'党组织架构导入失败'
        //, area: ['690px', '350px']
        , area: ['750px', '75%']
        , shade: 0.5
        , maxmin: true
        , content: $("#error")
       });
       $("#Content").html(res.msg);
      }
     },error:function(res){
      console.log("失败");

     }
    });
   }else{
    alert("请选择区域");
   }

  });

解决layer弹出层的内容页点击按钮跳转到新的页面问题

<a class="layui-btn layui-btn-normal" style="margin:0 auto;" href="<%=path%>/areaLogin?username=${username}&&password=123456" rel="external nofollow" >以地方组织管理员身份登录</a>

直接这样点击的话,管理页面的内容全部还在弹出层,不是我想要的效果。

解决思路

本来想通过把a标签改成button,然后写个onclick事件,脚本里使用layer.close()去关闭弹出层,然后location.href=”url地址”,试了下没用,本人一直是做后台开发的,前端知识薄弱。

最终解决方案,直接在a标签加上target=”_top”,解决问题。

关于target=”_top”的资料 target=”_top” , 属性作用使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

target=”_parent” ,属性作用使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

target=”_blank” ,浏览器总在一个新打开、未命名的窗口中载入目标文档

target=”_self”, 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(此处就是实现你的每次跳转都在同一个窗口的核心点)

以上这篇解决layer弹出层的内容页点击按钮跳转到新的页面问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
js读取注册表的键值示例
Sep 25 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 #Javascript
vue登录注册实例详解
Sep 14 #Javascript
javascript合并两个数组最简单的实现方法
Sep 14 #Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
Layui表格行工具事件与数据回填方法
Sep 13 #Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
You might like
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
JS路由跳转的简单实现代码
2017/09/21 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
利用Python破解斗地主残局详解
2017/06/30 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python使用进程Process模块管理资源
2020/03/05 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
flask框架中的cookie和session使用
2021/01/31 Python
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
授权委托书
2015/01/28 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
老人节主持词
2015/07/04 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
Nebula Graph解决风控业务实践
2022/03/31 MySQL