本文是自己整理的关于layer插件的提示层的结果

一、准备工作

  下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用)

  百度云资源链接:

  jQuery插件:链接:https://pan.baidu.com/s/1P8wGff6UfVn5JaplH4uysw 密码:rms3

  layer插件:链接:https://pan.baidu.com/s/1EuTF0DBY_azdQhcRCl0yBA 密码:xvjh

二、提示层测试

  (1)官方案例:

  默认关闭时间是3秒,效果如上(背景是官网的广告,实际效果是黑色半透明),代码如下:

$(function(){
layer.msg('玩命提示中');
})

  (2)自定义样式以及时间,效果如下:

  代码如下:

$(function(){
layer.msg('操作成功!',
{
icon: 6, //icon样式
time: 2000, //关闭时间为2s
       offset: ['90px', '900px']//自定义位置
}
);
})

 

三、其他细节知识

  1、自定义位置 offset: ['90px', '900px']

  类型:String/Array,默认:'auto'
  默认垂直水平居中。当你只想定义top时,你可以offset: '100px'。当您top、left都要定义时,你可以offset: ['100px', '200px']。除此之外,你还可以定义offset: 'rb',表示右下角。其它的特殊坐标,你可以自己计算赋值。

layer插件学习——提示层的更多相关文章

  1. layer插件学习——弹框(自定义页)

    本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...

  2. layer插件学习——询问框

    本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...

  3. layer插件学习——icon样式

    本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...

  4. jQuery弹出层layer插件的使用

    引入插件layer 触发弹出层的按钮/链接 <a href="javascript:showPop();"> <img src="" /> ...

  5. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  6. keras模块学习之层(layer)的使用-笔记

    本笔记由博客园-圆柱模板 博主整理笔记发布,转载需注明,谢谢合作! keras的层主要包括: 常用层(Core).卷积层(Convolutional).池化层(Pooling).局部连接层.递归层(R ...

  7. layer插件

    最近在做公司的官网,其中有用到layer这款插件,以前没有接触过,不过学下来觉得好用好学.下面分享一下我的学习心得. layer是web弹出层组件.在官网下载好layer后,把他部署到你的项目文件中( ...

  8. layer插件layer.photos()动态插入的图片无法正常显示

    layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...

  9. uexQQ插件学习心得

    uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...

随机推荐

  1. js-倒计时原理

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  2. CentOS中自动加载802.1q模块

    要想在CentOS中自动加载内核模块,需要在/etc/sysconfig/modules/目录中增加一个脚本,在此脚本中加载所需的模块. 下面是我所用的一个名为8021q.modules的脚本,用来在 ...

  3. 2016CVPR论文集

    http://www.cv-foundation.org/openaccess/CVPR2016.py ORAL SESSION Image Captioning and Question Answe ...

  4. 《jQuery基础教程(第四版)》学习笔记

    本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

  5. 设计模式《JAVA与模式》之调停者模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述调停者(Mediator)模式的: 调停者模式是对象的行为模式.调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显引用.从 ...

  6. es 修改拼音分词器源码实现汉字/拼音/简拼混合搜索时同音字不匹配

    [版权声明]:本文章由danvid发布于http://danvid.cnblogs.com/,如需转载或部分使用请注明出处 在业务中经常会用到拼音匹配查询,大家都会用到拼音分词器,但是拼音分词器匹配的 ...

  7. babel 7 简单指北

    babel 7 对于 babel 7,babel 的官网已经介绍得非常详细了,但有时感觉文档和实际使用总是差那么一点东西. 主要包 先来看一下主要的包,babel 7 对于包进行了一些简化. @bab ...

  8. vue教程3-07 vue-loader

    vue-loader: vue-loader: 其他loader -> css-loader.url-loader.html-loader..... 后台: nodeJs -> requi ...

  9. 剑指offer十五之反转链表

    一.题目 输入一个链表,反转链表后,输出链表的所有元素. 二.思路 详细分析见代码注释 三.代码 public class Solution {     public ListNode Reverse ...

  10. Form表单中不同的按钮进行不同的跳转

    本文参考:http://my.oschina.net/sallency/blog/300568 在开发工作共我们往往会遇到一个表单需要包含多个action不同的提交动作,这时候就不能在使用submit ...