解决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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
javascript实现五星评分功能
Nov 10 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
原生JS实现pc端轮播图效果
Dec 21 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
php设计模式之命令模式的应用详解
2013/05/21 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php筛选不存在的图片资源
2015/04/28 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
高级销售员求职信
2013/10/25 职场文书
小学新学期教师寄语
2014/01/18 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
golang内置函数len的小技巧
2021/07/25 Golang