引入插件layer

触发弹出层的按钮/链接

<a href="javascript:showPop();">
<img src="" />
</a>

弹出层内容

<div style="display: none">
<div id="attention" style="text-align:left;max-height:5rem;overflow-y:scroll;">
<p>这是显示在弹出层里的文字</p>
</div>
</div>

js内容

    function showPop(){
layer.open({
content: $("#attention").prop("outerHTML"),
style: "text-align: left;"
});
};

纯粹新手记录,一个简单的小用法,更多功能请查看layer官方演示与讲解,以后多用多熟悉吧~

jQuery弹出层layer插件的使用的更多相关文章

  1. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  2. 【转】10 个很有用的 jQuery 弹出层提示插件

    模态对话框为网站用户提供了快速显示信息的方法,也可以用来提示错误.警告和确认等信息,这里介绍了 10 个弹出模态对话框插件. How to Create a jQuery Confirm Dialog ...

  3. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  4. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  5. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  6. JQuery弹出层,实现弹层切换,可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  8. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

随机推荐

  1. 深入浅出REST架构 REST架构概述

    http://www.nowamagic.net/librarys/veda/detail/885何为REST? REST是英文Representational State Transfer的缩写,中 ...

  2. pandas知识点汇总

    ## pandas基础知识汇总 1.时间序列 import pandas as pd import numpy as np import matplotlib.pyplot as plt from d ...

  3. 无法删除尚未附加的实体-linq中使用反射删除记录出现错误,应该如何解决。

    db.airports.Attach(data); db.airports.DeleteOnSubmit(data); db.SubmitChanges();

  4. openfireserver和jdk环境删除命令

    一.卸载jdk1.8 终端依次运行以下的命令 sudo rm -fr /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin sudo rm -rf / ...

  5. java启动参数 设置

    JAVA_MEM_OPTS="" BITS=`java -version 2>&1 | grep -i 64-bit` if [ -n "$BITS&quo ...

  6. ultragrid checkbox

    울트라그리드에 체크박스 넣을 사용하는 속성. cols["checked"].Header.Caption = ""; cols["checked ...

  7. [elk]logstash的最佳实战-项目实战

    重点参考: http://blog.csdn.net/qq1032355091/article/details/52953837 不得不说这是一个伟大的项目实战,是正式踏入logstash门槛的捷径 ...

  8. Yii2中对数据库的查询方法如下

    User::find()->all(); 此方法返回所有数据: User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find()->w ...

  9. datatables 相关文章

    http://blog.csdn.net/zhu_xiao_yuan/article/details/51252300 datatables参数配置详解  http://blog.csdn.net/j ...

  10. 解决 Netbeans Ant: taskdef class org.netbeans.modules.java.j2seproject.copylibstask.CopyLibs cannot be found

    你在用Netbeans(实际上是Ant)Clean and Build你的项目生成可执行文件(例如Windows下的exe文件)时候遇到报错 或者遇到这样的报错: The libs.CopyLibs. ...