Jquery 弹出层插件实现代码

筱彭妈咪

筱彭妈咪

2016-02-19 15:06

下面这个Jquery 弹出层插件实现代码教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!
直接看代码:
代码如下:
%@ 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"/divspan class="layer-close"×/span/divdiv class="layer-content"/div/div"
}

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

插件下载地址:jquery.layer.js
展开更多 50%)
分享

猜你喜欢

Jquery 弹出层插件实现代码

Web开发
Jquery 弹出层插件实现代码

jquery 弹出层实现代码

Web开发
jquery 弹出层实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery 锁定弹出层实现代码

Web开发
jquery 锁定弹出层实现代码

jQuery插件 tabBox实现代码

Web开发
jQuery插件 tabBox实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery 遮罩层实现(mask)实现代码

Web开发
JQuery 遮罩层实现(mask)实现代码

jquery 弹出登录窗口实现代码

Web开发
jquery 弹出登录窗口实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Jquery Ajax.ashx 高效分页实现代码

Jquery Ajax.ashx 高效分页实现代码

令Win32应用程序跳入系统零层

令Win32应用程序跳入系统零层
下拉加载更多内容 ↓