layer.js 是一个很好用的弹窗框架,使用的时候很方便,但是今天遇到一个问题,让我很头疼啊,一直都做不出来,就是登录和注册弹窗的切换问题

这里涉及到两个页面:guide.html 即父页面,denglu.html 页面,即子页面

在父页面中打开子页面:

  var adaoli = $("ul.nav ul.right div.dingwei li a");
Adenglureg.on("click", function () {
var index = $(this).index("ul.wel li.left a");
if (index == 0) {
indexk = layer.open({
title: false,
type: 2,
content: ['./detail/denglu.html', 'no'],
area: ['400px', '420px'], });
} else if (index == 1) {
indexk = layer.open({
title: false,
type: 2,
content: ['./detail/zhuce.html', 'no'],
area: ['400px', '650px'],
});
};

点击guide.html 上的“登录”,就弹出了以上的弹框;现在想直接点击弹框上(右下角)“注册”按钮,切换到注册页面:

尝试:在 guide.html  中写:

   $("#backzhucce").on("click", function () {
layer.closeAll();
layer.open({
title: false,
type: 2,
content: ['./detail/zhuce.html', 'no'],
area: ['400px', '650px'],
});
});

结果:没有反应,也没有报错

尝试:在denglu.html 中写:

 $("#backzhucce").on("click", function () {
layer.closeAll();
layer.open({
title: false,
type: 2,
content: ['../detail/zhuce.html', 'no'],
area: ['400px', '650px'],
});
});

结果:他直接在弹框中重新打开了一个弹框,显然是不对的,不是我们所要的,我们要的应该是这样:先关闭现有的弹框,然后重新打开注册弹框

在百度里看了一下:将denglu.html 中内容改写为:

     $("#backzhucce").on("click", function () {
parent.layer.closeAll();
parent.layer.open({
title: false,
type: 2,
content: ['./detail/zhuce.html', 'no'],
area: ['400px', '650px'],
});
});

运行结果:报错

不知道是什么原因,于是一直百度,后来与一个朋友讨论了一下:把代码放在服务器上重新运行:

denglu.html 中不变,仍然为:

  $("#backzhucce").on("click", function () {
parent.layer.closeAll();
parent.layer.open({
title: false,
type: 2,
content: ['./detail/zhuce.html', 'no'],
area: ['400px', '650px'],
});
});

运行结果:终于OK le ,先关掉,再重新弹出注册弹框,这才是我们想要的结果

终于OK 了,这里涉及到两个页面,需要在服务器上运行;

虽然耗费了好些时间,但是挺高兴的,~~~

记住了,需要在服务器上运行,直接用浏览器打开是不行的~~~

layer.js 注册登录切换的问题的更多相关文章

  1. js注册登录审核

    <script type="text/javascript"> $(function(){ $("#sendSms").click(function ...

  2. express+vue+mongodb+session 实现注册登录

    上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能,那么今天是在那个基础之上做了扩展,首先实现的功能有如下: 1. 支持注册,登录功能,用户可以 ...

  3. Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  4. 原生js验证简洁美观注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...

  5. Node.js原生及Express方法实现注册登录原理

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

  6. js验证登录注册

    js验证登录注册的优势,在前台直接验证,不需要在后台读取返回数据验证,减轻服务器压力. 登陆验证得必要性,拦截恶意脚本的登录注册攻击.哈哈,当然有些高手是可以直接跳过js验证的. 所以还是后台验证,并 ...

  7. node.js 初学(二)—— 搭建注册/登录服务器

    node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...

  8. 很实用的HTML5+CSS3注册登录窗体切换效果

    1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...

  9. 9款大气实用的HTML5/CSS3注册登录表单

    1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

随机推荐

  1. idea2018+maven+web新手maven指南

    CSDN上的博主详细的很 https://blog.csdn.net/hncu1306602liuqiang/article/details/82356097

  2. js实现table表格相同内容按需合并

    uniteTdCells(tableId) { var table = document.getElementById(tableId); for (let i = 0; i < table.r ...

  3. Using Dispatcher

    he following code example shows how you might attempt to update the UI from your task logic. // The ...

  4. C#修改json文件中的某些值

    using Newtonsoft.Json; JsonSerializer serialiser = new JsonSerializer(); string newContent = string. ...

  5. C高级第二次作业

    PTA作业第一部分 6-7 删除字符串中数字字符(10 分) 删除一个字符串中的所有数字字符. 函数接口定义: void delnum(char *s); 其中 s是用户传入的参数. 函数的功能是删除 ...

  6. 两个1/x类的广义函数

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/04/15 1.$\text{p.v.}\,\frac{1}{x}$ 因为$(x \ln x - x)' = ...

  7. UA池和代理池

    scrapy下载中间件 UA池 代理池 一.下载中间件 先祭出框架图: 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - 作用: (1)引擎 ...

  8. python学习之路06——字符串

    字符串 1.概念 字符串就是由若干个字符组成的有限序列 字符:字母,数字,特殊符号,中文 表示形式:采用的单引号或者双引号 注意:字符串属于不可变实体 2.创建字符串 str1 = "hel ...

  9. 利用开源项目jadx反编译Android应用

    原文转自:http://bbs.itheima.com/thread-200475-1-1.html 利用开源项目jadx反编译Android应用 利用Github开源项目jadx可以直接对 .dex ...

  10. 浅谈一下mshta在CVE-2017-11882里的命令构造

    Evi1cg同学前不久放出CVE-2017-11882的一个 python利用脚本,地址在https://github.com/Ridter/CVE-2017-11882/,不过其中一个版本里边有一个 ...