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

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

导入页按钮：

<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("请选择区域");
   }

  });


<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弹出层的内容页点击按钮跳转到新的页面问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui.js实现的表单验证功能示例

    layui.js实现的表单验证功能示例

    本文实例讲述了layui.js实现的表单验证功能.分享给大家供大家参考,具体如下: 该示例可针对文本框,手机,邮箱,textarea等格式进行验证 首先引入如下文件: <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet"

  • layui使用form表单实现post请求页面跳转的方法

    如下所示: window.location.href='url?param=' + paramValue; 上面这种方式实现页面跳转附带参数,容易造成信息泄露: layui使用form表单实现post请求,避免信息泄露(设置form表单隐藏,也可以初始化时隐藏): 这里是在数据表格查询数据时的按钮操作,其他操作类似 <table id="myTable" class="layui-table" lay-filter="myTableDetail&qu

  • layui自己添加图片按钮并点击跳转页面的例子

    1.按钮样式 <table class="layui-hide" id="test" lay-filter="menu-filter" style="margin: 0 10px;"></table> <script type="text/html" id="toolbtn"> <a class="" lay-event=&q

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

    在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会

  • 解决layer弹出层中表单不起作用的问题

    如下所示: var html = '<form class="layui-form" action="">' + '<div class="layui-form-item"><label class="layui-form-label">角色名</label><div class="layui-input-block"><input type

  • 解决layer弹出层msg的文字不显示的问题

    今天在做项目的时候,做了一个弹出层,需要提示,就写了一个 layer.msg('雅蠛蝶 O.o', { icon: 6 ,btn: ['嗷','嗷','嗷'] }); 可是结果却是这样的 雅蠛蝶看不见 查了好久,才知道是我代码的css设定了文字是白色,所以看不见.因为没有找到修改msg背景的办法,所以可以根本文字的颜色 layer.msg('<a style='color:red'>雅蠛蝶 O.o</a>', { icon: 6 ,btn: ['嗷','嗷','嗷'] }); 以上

  • 解决layer弹出层自适应页面大小的问题

    前两天在Vue中引入了Vue-layer插件,实现了弹出层效果.不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好.结果那给用户看,他们是12寸的笔记本.弹出层直接撑爆了页面,无法关闭... 网上的解决方案大都是以下几种: 1.改成百分比形式.有bug,下面细说. 2.改成em,rem等.同上 3.采用area:auto.可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现"顶天立地"的效果 4.采用iframeAuto.这个没太搞

  • 在layui中layer弹出层点击事件无效的解决方法

    1.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事 件的 2.而(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件不起作用:(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元

  • 解决layui弹出层layer的area过大被遮挡的问题

    layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况. 如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到完全的弹出窗口,才可以操作. layui 为我们提供了 layer.style(); 方法来重新跳整窗口的大小 , 然后我们只需要写一个函数,得到当前document的宽度和高度, 判断弹出框是否大于document来调整窗口大小 <!DOCTYPE html> <html lang=&qu

  • 详解Layer弹出层样式

    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 具体请

  • layer弹出层父子页面事件相互调用方法

    // 父页面 <body> <a data-url="bbbb.html" id="parentIframe">小小提示层</a> <input id="shuzhi" /> <button class="but_par">父页面</button> </body> <script src="../jquery-1.9.1.min

  • Layer弹出层动态获取数据的方法

    前一阵子做了一个简单的小项目,用到了Layer弹出层(弹出层的用法就不多加赘述了,官网上都有详细的介绍,这里附上网址http://layer.layui.com/),当时前后台合页面的时候就出现了一个问题,弹出层总是获取不到数据,不过后面还是和同学们一起解决了,希望能帮助到大家. 之前的代码: <a id="func11" onclick="func11();">点击查看</a> function func11() { console.log

  • layer弹出层自定义提交取消按钮的例子

    首先从js开始 /** * 检查是否选中 */ Sendandre.check = function () { var selected = $('#' + this.id).bootstrapTable('getSelections'); if (selected.length === 0) { Feng.info("请先选中表格中的某一记录!"); return false; } else { Sendandre.seItem = selected[0]; console.log(

随机推荐