popup_layer插件示例

导入popup_layer.js插件

设置好显示的div：

<div class="main" id="showImg" style="display: none;">

　　要显示的图片

　　<img width="270" height="290" src="/common/front/images/demo.png"/>

　　<a href="javascript:void(0)" id="close2" class="closeBtn">关闭</a>

</div>

js：

$(document).ready(function() {

　　demoImg表示的是当你点击所要触发现实图片的标签

　　showImg表示的是你显示的标签

　　close2表示的是当图片显示的后关闭的按钮

　　offsets表示的是你图片出现地方(x，y应该是根据显示的图片来定位的)

　　new PopupLayer({trigger:"#demoImg",popupBlk:"#showImg",closeBtn:"#close2",offsets:{x:0,y:0}});

});

$("#demoImg").css("display", "");

时间： 2024-12-10 10:17:51

popup_layer插件示例的相关文章

Gradle | 配置Servlet容器 Gretty插件示例

Gradle | 配置Gretty示例 前述 Gradle版本 4.10.2. 建议在build.gradle中修改源, 推荐使用阿里的: allprojects { repositories { maven{ url 'http://maven.aliyun.com/nexus/content/groups/public/'} } } 使用Gretty插件作为Servlet容器 示例中所使用的Gretty Github, 它fork自akhikhl/gretty. 在build.gradle中

【Bootstrap基础学习】03 Bootstrap插件示例

模态框 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> <!-- 模态框(Modal) --> <div class="modal

Mybatis分页插件 - 示例

Mybatis极其(最)简(好)单(用)的一个分页插件 http://blog.csdn.net/isea533/article/details/23831273 这里说最好用,绝对不是吹的,不过有好多人都不理解为什么要用这个插件,自己手写分页sql不是挺好吗...... 所以我特地写这样一个例子来讲为什么最好用. 假设我们已经写好了Mapper的接口和xml,如下: public interface SysLoginLogMapper { /** * 根据查询条件查询登录日志 * @param

K3/cloud执行计划插件示例

public class AutoCheckInventory : IScheduleService { /// <summary>        /// 实际运行的Run 方法        /// </summary>        /// <param name="ctx"></param>        /// <param name="schedule"></param>       

MyBatis插件及示例----打印每条SQL语句及其执行时间

Plugins 摘一段来自MyBatis官方文档的文字. MyBatis允许你在某一点拦截已映射语句执行的调用.默认情况下,MyBatis允许使用插件来拦截方法调用 Executor(update.query.flushStatements.commint.rollback.getTransaction.close.isClosed) ParameterHandler(getParameterObject.setParameters) ResultSetHandler(handleResultS

MyBatis7：MyBatis插件及示例----打印每条SQL语句及其执行时间

Plugins 摘一段来自MyBatis官方文档的文字. MyBatis允许你在某一点拦截已映射语句执行的调用.默认情况下,MyBatis允许使用插件来拦截方法调用 Executor(update.query.flushStatements.commint.rollback.getTransaction.close.isClosed) ParameterHandler(getParameterObject.setParameters) ResultSetHandler(handleResultS

Grunt常用插件及示例说明

下述给出了常用Grunt插件,并列举了部分插件示例: 插件名称 说明 Github地址 grunt-contrib-clean 清空文件和文件夹 https://github.com/gruntjs/grunt-contrib-clean grunt-contrib-copy 复制文件和文件夹 https://github.com/gruntjs/grunt-contrib-copy grunt-contrib-concat 连接.合并文件 https://github.com/gruntjs/

JQuery插件之Jquery.datatables.js用法及api

1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "

jquery插件的写法

一.JQuery的插件主要分为3种: 1.封装对象方法的插件. 如JQuery的parent()方法,appendTo()方法,addClass()方法等. 2.封装全局函数的插件. 如JQuery.ajax(),JQuery.trim()方法 3.选择器插件. 二.JQuery的插件机制: i.JQuery提供了两个用于扩展JQuery功能的方法,jQuery.fn.extend()方法和jQuery.extend()方法.前者用于扩展前面的提到的第一种插件,后者用于扩展后两种插件.这两个方法