解决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 相关文章推荐
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
vue制作抓娃娃机的示例代码
Apr 17 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
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP代码覆盖率统计详解
2020/07/22 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
python 编码规范整理
2018/05/05 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
物流仓管员工作职责
2014/01/06 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
个人收入证明格式
2015/06/24 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
python区块链持久化和命令行接口实现简版
2022/05/25 Python