layer弹出层的使用（一）_AlbertHongXS的博客-程序员秘密

技术标签： layer

第一步：部署

下载layer后，把它部署到你项目中的任何一个目录（当然，我们推荐放在前端相关目录里），你不能去挪动layer里面的文件结构，因为它们是不可拆散的组合。就像这样：

第二步：引入

亲爱的，你不必去管那些文件是干嘛的，你只需要认准一个文件：layer.js 没错，当你试图在页面呈现layer的时候，你应该这样去做：

第三步：使用

是时候目睹layer的挫样了，由于她是基于jQuery，你可以选择用jQuery的api方式去抒写。当你想弹出一个layer实例的时候，你首先应该绑定事件，就像上面的那个例子。

弹出一个页面层

<!doctype html>
<html>
<head>
<title>开始使用layer</title>
</head>
<body>

你必须先引入jQuery1.8或以上版本
<script src="jQuery的路径"></script>
<script src="layer.js的路径"></script>
<script>

 
 
  
   
  
  
//弹出一个页面层
$('#test2').on('click', function(){
  layer.open({
  type: 1,
  area: ['600px', '360px'],
  shadeClose: true, //点击遮罩关闭
  content: '\<\div style="padding:20px;">自定义内容\<\/div>'
  });
});

弹出一个iframe层

$('#parentIframe').on('click', function(){
  layer.open({
  type: 2,
  title: 'iframe父子操作',
  maxmin: true,
  shadeClose: true, //点击遮罩关闭层
  area : ['800px' , '520px'],
  content: 'test/iframe.html'
  });
});

弹出一个loading层

$('#test4').on('click', function(){
  var ii = layer.load();
  //此处用setTimeout演示ajax的回调
  setTimeout(function(){
  layer.close(ii);
  }, 1000);
});
弹出一个tips层

弹出一个tips层

$('#test5').on('click', function(){
  layer.tips('Hello tips!', '#test5');
});

文章来自：http://layer.layui.com/

本文链接：https://blog.csdn.net/hongxiaoshuang/article/details/57421663

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

论文阅读总结(Text Level Graph Neural Network for Text Classification)_text level gcn与gcn区别_Mr.琛的博客-程序员秘密

From ACL2019

TABERT: Pretraining for Joint Understanding of Textual and Tabular Data论文阅读_麦香猪扒饭的博客-程序员秘密

AbstractBert是对纯文本做的预处理语言模型，而现有的很多数据集是半结构化的，如表格等等。所以文章提出了TaBert模型，这个模型能够学习如何表达文本语句和半结构化的表格。并在WikiTableQuestion和Spider上取得良好的效果。...

解决错误error LNK2019: 无法解析的外部符号 imp函数名，该符号在函数.._szh_buaa的博客-程序员秘密

在添加头文件处，添加预编译指令： #pragma comment(lib,"lib文件名或路径")

Java String 对象，你真的了解了吗？_平头哥的技术博文的博客-程序员秘密

String 对象的实现String对象是 Java 中使用最频繁的对象之一，所以 Java 公司也在不断的对String对象的实现进行优化，以便提升String对象的性能，看下面这张图，一起了解一下String对象的优化过程。1. 在 Java6 以及之前的版本中String对象是对 char 数组进行了封装实现的对象，主要有四个成员变量： char 数组、偏移量 offset、字符数量...

Glide使用总结_android攻城师的博客-程序员秘密

简介优点与使用环境生命周期相绑定：RequestManagerFragment & SupportRequestManagerFragment 内存的三级缓存池：LruMemoryResources, ActiveResources, BitmapPool 内存复用机制：BitmapPool 为什么要绑定生命周期可以实现网络请求根据生命周期而暂停、执行、恢复、释放等可以实现资源比如图片的自动释放降低了内存的压力降低了内存泄漏的风险...

HQL子查询怎么会出错呢？？_ying7839的博客-程序员秘密

大家好！现在做项目的时候，碰到了一个问题，请帮忙看看怎么会事吧，谢谢了先～～1）映射文件： 2)代码： String s = "select x.FirstName,x.LastName from (select x.FirstName,x.LastName from Employee x...