Layui和Jquery的弹出层

一． Jquery的用法

1. Jquery的弹出层是一个简单一点的弹出层，并且让其弹出的代码量是一个少的弹出层<div class="modal> 这个modal类的关键字就是代表一个弹出层的意思了，并且里面的就可以给其内容了，<div class="modal-content>这个类就是一个全部内容的含义的意思了，一个内容里面包含着头部和尾部<div class="modal-header>此类就是代表着头部了，在图1里面你就可以看到有着一个修改学院这个关键子了，modal-header就可以放置头部的内容了，<div class='modal-body>而这个类，就可以设置尾部的内容了，如图
   1，学院名称等等和一个input标签等等，关于尾部的内容都可以放置里面的了！

图1 Jquery弹出样式

2. Layui的弹出方式是一个简单的模式的啦，只要你在给一个按钮里面一个函数等等，在调
用此函数给一个modal(‘show’)值他，就可以轻易的调用出来了。
3. 如图2，这个就是一个show出来的调用了。

图2 方法调用

二． Layui的用法

1. Layui的弹出层相对来说就功能多一点，而且代码量却给Jquery也一点，但是却是一个功能
   却是一个多样式的！并且在图3里面你也可以看到layui的弹出层还是一个可以进行一个收
   缩的，还可以进行一个放大的功能！

图3 Layui弹出样式

2. Layui这个在html里面就不用什么类来写在里面的了，而是直接写样式就可以了，写完后
只要调用出来就可以了，首先我们要把需要的工具初始化后调用先
3. Type在表格里面用着多个层如：0（信息框，默认）1（页面层）2（iframe层）3（加载层）
4（tips层），在里面我们还可以用到多个遮罩层呢！
4. Title这个就是标题了，我们可以把相好的标题放在里面去！
5. Offset这个就是设置里面的坐标了，我们可以让其里面的内容的让其在靠上面，只要设置一
下给个top或者left等等，就可以让其靠上方，左方了，同时还可以给像素来设置方向值了。
6. Anim这个就是我最喜欢之一了，可以在遮罩层弹出来的时候设置一下动漫效果了，而且优美
好看里面有六个值，第一个就可以给0~6，你可以从零开始给一下就可以测试一下了，比如
anim: 0 平滑放大，等等！
7．在图4里面就是一个使用的代码图了！

图4 Layui代码

总结：

在这次总结里面，其实就是想让自己学会一点对插件的运用一点，并且还可以收获到一点点样式的使用方法和一些弹出层的使用，并且希望上面也可以帮助到你！