Jquery 弹出层插件实现代码

直接看代码：


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.layer.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
var layer = $('none').layer({ content: '这里是层内容，默认焦点可以用none对象来代替' });
layer.open();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="button" type="button" value="第一个层" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type="button" onclick="$(this).layer({ content: $('#content') }).open();" value="第二个层" />
<div id="content" style="display:none;">
我是Dom对象内的内容
<input id="aaa" type="text" value="我是表单" />
</div>
</form>
</body>
</html>

代码如下:

/*
* 作者：彭白洋 2009.10.24
* 功能：可弹出自定义字符串、Dom对象，根据事件焦点弹出、关闭动画
* 调用方法：
* 1、初始化直接打开：$("#buttonID").layer().open()；
* 2、初始化：var layer=$("#buttonID").layer()；打开：layer.open()；关闭：layer.close()；
* 3、初始化：var layer=$("#buttonID").layer({自定义配置})；打开：layer.open()；关闭：layer.close()；
*样式：
* .layer-box{background-color:#fff;width: 692px;border: 1px solid #ccc;position:absolute;}
* .layer-box div.layer-bar{background: #f4f4f4;padding: 5px;margin:0px;text-align:left;height:18px;position:relative;}
* .layer-box div.layer-bar span.layer-close{position:absolute;width:18px;height:18px;top:0px;right:0px;cursor:pointer;}
* .layer-box div.layer-content{margin:0px;padding:5px 0px 0px 0px;text-align:center;}
*/
/// <reference path="jquery-1.3.2-vsdoc.js" />
(function($) {
$.layer = function(element, options) {
var base = this;
base.$el = $(element);
base.tagHide = true;
//初始化层
base.init = function() {

base.options = $.extend({}, $.layer.defaults, options);
base.$layerBox = $(base.options.template);
base.posX = base.posY = 0;
base.moveing = false;

//加载样式
if (!$.layer.hasCss && base.options.cssurl != "") {
$("head", base.options.target).append("<link href=\"" + base.options.cssurl + "\" rel=\"stylesheet\" type=\"text/css\" />");
$.layer.hasCss = true;
}

//加载层对象
$.layer.maskLayerIndex += 20; //调高层位置
base.$layerBox.appendTo("body", base.options.target).css({ "z-index": $.layer.maskLayerIndex }).hide();
base.$layerBox.find("div[class='layer-title']").append(base.options.title);
//判断内容是字符串还是Jquery对象
if (typeof (base.options.content) == "object") {
base.$tempContentParent = base.options.content.parent();
base.tagHide = base.options.content.is(":hidden");
base.$tempContent = base.options.content.clone();
base.options.content.appendTo(base.$layerBox.find("div[class='layer-content']")).show();
}
else {
base.$layerBox.find("div[class='layer-content']").append(base.options.content);
}
//绑定关闭按钮事件
base.$layerBox.find("span[class='layer-close']").mousedown(function(event) {
//阻止事件冒泡
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
base.close();
return false;
});
base.$layerBox.find("div[class='layer-bar']").mousedown(function(event) {
base.moveStart(event);
});
//base.$layerBox.show();

}

//打开层
base.open = function() {
//层显示动画
//alert($("html", base.options.target).height());
var mtop = ($("html", base.options.target).height() - base.options.height) / 2 + $(document, base.options.target).scrollTop(); //
var mleft = $("html", base.options.target).width() / 2 - base.options.width / 2; //
base.$layerBox.css({ top: base.$el.offset().top, left: base.$el.offset().left, width: 0, height: 0 }).animate({
left: mleft,
top: mtop,
width: base.options.width,
height: base.options.height,
opacity: "show"
}, "slow", function() {
//加载遮罩层
if (base.options.masklayer.show) {
$.layer.maskLayerIndex -= 10; //降低层位置
base.$masklayer = $("<div style=\"display:none; z-index:" + $.layer.maskLayerIndex + "; filter: alpha(opacity:" + base.options.masklayer.alpha + "); left: 0px; width: 100%; position: absolute; top: 0px; height: " + $(document, base.options.target).height() + "px; background-color:" + base.options.masklayer.bgcolor + "\"></div>");
base.$masklayer.appendTo("body", base.options.target).animate({
opacity: 'toggle'
}, 500);
}
});
}

//开始移动
base.moveStart = function(event) {
base.moveing = true;
base.bgColor = base.$layerBox.css("background-color");
base.$layerBox.css("background-color", "Transparent").children().hide();

base.posX = event.pageX - base.$layerBox.offset().left;
base.posY = event.pageY - base.$layerBox.offset().top; ;
$(document).mousemove(function(event) {
base.moveOn(event);
}).mouseup(function() {
base.moveStop();
});
if ($.browser.msie) {
base.$layerBox.get(0).setCapture();
} else {
document.addEventListener("mousemove", base.moveOn, true);
}
}

//移动中
base.moveOn = function(event) {
if (base.moveing) {
window.getSelection && window.getSelection().removeAllRanges();
base.$layerBox.css({ top: Math.max(event.pageY - base.posY, 0), left: Math.max(event.pageX - base.posX, 0) });
return false;
}
}

//移动停止
base.moveStop = function() {
base.$layerBox.css("background-color", base.bgColor).children().show();
base.moveing = false;
$(document, base.options.target).unbind("mousemove");
if ($.browser.msie) {
base.$layerBox.get(0).releaseCapture();
} else {
document.removeEventListener("mousemove", base.moveOn, true);
}
}

//关闭层
base.close = function() {
if (base.$tempContent) {
base.$tempContent.appendTo(base.$tempContentParent);
if(base.tagHide){
base.$tempContent.hide();
}
}
if (base.options.masklayer.show) {
base.$masklayer.animate({
opacity: 'toggle'
}, 500, function() {
$(this).remove();
base.$layerBox.animate({
left: base.$el.offset().left,
top: base.$el.offset().top,
width: 0,
height: 0,
opacity: "hide"
}, "hide", function() {
$(this).remove();
});
});
}
else {
base.$layerBox.animate({
left: base.$el.offset().left,
top: base.$el.offset().top,
width: 0,
height: 0,
opacity: "hide"
}, "hide", function() {
$(this).remove();
});
}
}

base.init();
}

$.layer.hasCss = false;
$.layer.maskLayerIndex = 1000;
//默认配置
$.layer.defaults = {
masklayer: { show: true, bgcolor: '#eee', alpha: 50 }, //是否显示覆盖层
target: window.self.document,
cssurl: "layer.css",
title: "层标题",
content: "层内容",
width: 500,
height: 300,
template: "<div class=\"layer-box\"><div class=\"layer-bar\"><div class=\"layer-title\"></div><span class=\"layer-close\">×</span></div><div class=\"layer-content\"></div></div>"
}

$.fn.layer = function(options) {
return new $.layer(this, options);
}
})(jQuery);

插件下载地址：jquery.layer.js

赞 (0)

相关推荐

  • Jquery弹出层插件ThickBox的使用方法

    Jquery弹出层插件ThickBox的使用方法

    thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法. 声明一下:这只是个人的总结记载而已. 准备工作:你需要三个文件:thickbox.js.thickbox.css.jquery.js,网上到处可下 具体使用: 第一步:将这三个文件引入到你要使用thickbox的页面 复制代码 代码如下: <script type="text/javascript" src="jquery.js">

  • JQUERY THICKBOX弹出层插件

    .THICKBOX支持一下浏览器: Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10--但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用: 1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少! 复制代码

  • Jquery实现弹出层分享微博插件具备动画效果

    Jquery实现弹出层分享微博插件具备动画效果

    此Jquery插件是一款非常实用的特效,是很多网站不可缺少的推广神兵利器,传统的一般都用百度.加网的分享插件,但样式外观都不怎么好看,用户体验效果差一点,此作品不但有分享功能,还具备了动画效果,提高了用户体验.由于用了CSS3,为了可以看到插件的最佳效果,建议大家使用谷歌.火狐等浏览器... 作品包括以下功能: 1.弹出层 2.遮罩层 3.动画效果 4.CSS3 效果如下: 源码下载 代码片段(1) 复制代码 代码如下: $(document).ready(function(e) { var s

  • jQuery Dialog 弹出层对话框插件

    原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class

  • jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    最终效果: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1

  • jQuery插件zoom实现图片全屏放大弹出层特效

    jQuery插件zoom实现图片全屏放大弹出层特效

    1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo

  • jQuery弹出层插件popShow用法示例

    jQuery弹出层插件popShow用法示例

    本文实例讲述了jQuery弹出层插件popShow用法.分享给大家供大家参考,具体如下: popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <script src="/js/common/jquery.min.js" type="text/javascript

  • jQuery弹出层插件popShow(改进版)用法示例

    jQuery弹出层插件popShow(改进版)用法示例

    本文实例讲述了jQuery弹出层插件popShow(改进版)用法.分享给大家供大家参考,具体如下: 前面一篇<jQuery弹出层插件popShow用法示例>分析了popShow插件的基本用法,这里再对插件进行一番改进. popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <scr

  • 基于jquery的blockui插件显示弹出层

    blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息:或者用来显示一个登陆窗口,也可用来显示图片等. blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏,可以在blockUI方法中指定一些参数,来控制弹出层显示的内容,大小,位置等.blockUI方法的常用的参数有:message,css,overlayCSS,showOverlay. message:主要用来设置要显示的内容,可以直接设置为一段文字,html

  • js弹出层(jQuery插件形式附带reLoad功能)

    js弹出层(jQuery插件形式附带reLoad功能)

    之前做一个项目,感觉里面的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改成jQuery的插件形式,并增加了reLoad的功能,感觉还不错,代码如下: 复制代码 代码如下: (function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$("#TB_overlay"); var height=$(document).height()+"px"; var width

  • 一个jquery的弹出层的插件第1/2页

    复制代码 代码如下: String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); }; (function($){ /* * $-layer 0.1 - jquery pulg-in * * Copyright (c) 2008 King Wong * $Date: 2008-09-28 $ */ var ___win___ = window.self; var

  • jQuery弹出层插件简化版代码下载

    复制代码 代码如下: String.prototype.replaceAll = function(s1,s2){  return this.replace(new RegExp(s1,"gm"),s2);  }; (function($){  /*  * $-layer 0.1 - New Wave Javascript  *  * Copyright (c) 2008 King Wong * $Date: 2008-10-09 $ */ var ___id___ = "&

  • jQuery弹出层插件Lightbox_me使用指南

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能 用于显示弹出层 2.Ligh

  • jQuery boxy弹出层插件中文演示及使用讲解

    使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中.使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation".这会给匹配的元素附加一些行为,如下: 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中. 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其

随机推荐