网页跳转多窗口堆叠

在前端的学习中不管是搭建一个页面，还是js代码的编写都会用到插件，因为插件能够让我们编写代码更加方便简洁，而插件也是各式各样的。不过，不管有多少样式的插件，最终都是一个目的，简少代码书写量。
之前介绍了jQuery的一些方法和使用，今天又有一个插件叫Layui，它也可以和jQuery一起使用。在Layui里有一个对于网页窗口处理的方法，通过窗口堆叠的形式将点击跳转的网页嵌套在内，使用非常便捷，那么话不多说，先来介绍一下这个方法。
我们要实现的效果是打开一个网页并将这个网页以窗口模式显示，那么首先就要做两个简单的网页出来了。

在控制器内创建两个视图，一个Main主页一个Page页面，然后再在两个视图分别搭建出两个页面，通过主页这边的一个按钮打开窗口。那么我们先看主页。

这是一个简单的bootstrap布局，里面只有一个按钮（布局随简陋，功能很实用），在写js代码前还是先引用jQuery和Layui两个插件，先前说过这两个插件可以同时使用功能（因为某些插件两者之间可能会有冲突）。

主页搭建完成了，接下便开始js部分点击添加窗口按钮弹出一个窗口，窗口显示的便是要打开的另一个页面。

定义一个变量layerIndex赋值为零，作为定义的弹出层，然后通过获取id获取到按钮并给它一个点击事件，事件点击要弹出窗口这时候就到了重点了，打开一个网页是调用open()方法打开一个html网页，在layui里面虽然也是open()方法，写法不过写法不太一样。
在layui里面，使用open()方法默认代码打开的原本是一个提示框，通过一个属性值content给它一个内容便可以作为一个弹出提示框的作用，不过它还可以设置其它属性。上面也说过，layui打开网页的方法不太一样，它是以键值对的形式通过设置属性值改变原本样式的内容和操作。
调用layer给它一个open事件，初始的样式是设置titile和content属性值。Title所设置的值是这个弹出层的框名，就是这个弹出层的名字；content所设置的值便是内容了，里面可以直接输入文本，或者可以输入一个其它的比如路径或者输出等等。那么我们是要打开一个网页那么这个弹出层的内容content值便可以设置为所需打开网页的路径即可。
然后对于是一个网页就还有其它属性需要设置，因为你设置你所需要打开的是一个什么弹出层它便默认为提示框，这时候虽然你网页路径设置了，但是你所输出的内容确实遗传链接。
type属性专门设置你弹出层类型的，在layui里面提供了五种类型，而我们在页面中打开的一个网页应该是一个iframe层，而iframe层所对应的type值为2，那么就要添加一个type属性并赋值为2，那么你所弹出的便是一个iframe页面，而且是以窗口形式呈现的。

我们这里的窗口是经过几种属性进行渲染过的，看上去更加美观（内容比较简单）。type值设置为2；
然后area是设置这个窗口的宽度和高度，有效调节便于窗口的审视；
title窗口的名字，这个是可以随便设置的文本，就假如是新增一个角色；maxmin属性，一个网页的窗口一般都不单是一个关闭按钮，还有最大化和最小化，而maxmin专门就是设置这两个按钮的，不设置则默认不显示最大和最小化按钮，而且这个属性仅限于type值为1和2才能使用；
offset设置窗口坐标，这里是离顶部10px，水平保持居中，还可以通过一个offset:[width,height]设置具体坐标；
最后的content，通过一个路径来获取到页面在这前提是设置了type为1或者2，弹出的是一个页面。

点击添加窗口，然后就会弹出一个窗口网页，所显示的网页就是先前设置的第二个视图的页面，然后这个框可以进行最小化和最大化，点击最小化窗口便会缩小到页面底部，最大化则放大整个页面的html（页面过大无图演示）。

对于打开一个这样的窗口，一般在项目中会应用填写资料保存等等，那么在资料填写完成之后按理说你点击保存则会自动关闭这个窗口，这时候则可以调用一个方法close()方法来关闭该页面，但是经过尝试过后无功而返。
对于一个网页，是没办法调用内部方法将本身关闭的，那么就不能在保存时使用关闭窗口了，这时候就要换一种方法。
自身不能关闭自身，但是父级元素可以关闭，在这里对于窗口来说，主页面就是它的父级窗口，则可以直接在父级窗口内写关闭方法，然后再在保存时调用这个方法。

写一个closeLayer方法，使用layer.close方法关闭本身定义所打开的窗口。

转到所打开窗口内的页面，该页面布局有一个保存按钮，获取到该按钮给它一个点击事件，使用parent方法选择到该父级元素获取父级元素内的closeLayer()方法就可以在点击保存的同时达到关闭窗口的效果。