漫画Jquery弹出层插件,如何自己写关闭事件？

hxftgy 2013-12-07 03:34:52
就是这个自定义的关闭事件，想了半天，不知道怎么写，请高人指点，谢谢！



<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>漫画原创Jquery弹出层插件 - Jquery-school</title>

<meta name="author" content="Jquery-School" />

<meta name="Copyright" content="Jquery-School,www.jq-school.com" />

<meta name="keywords" content="Jquery,Jquery资源,前端设计,div+css" />

<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="css/manhuaDialog.1.0.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/manhuaDialog.1.0.js"></script>

<script type="text/javascript">

$(function (){

	$("#test").manhuaDialog({					       

		Event : "click",								//触发响应事件

		title : "提交订单",					                        //弹出层的标题

		type : "iframe",									//弹出层类型(text、容器id、url、iframe)

		content : "order.html",								//弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址)

		width : 600,									//弹出层的宽度

		height : 400,									//弹出层的高度	

		scrollTop : 200,								//层滑动的高度也就是弹出层时离顶部滑动的距离

		isAuto : false,									//是否自动弹出

		time : 2000,									//设置弹出层时间，前提是isAuto=true

		isClose : false,  								//是否自动关闭		

		timeOut : 5000									//设置自动关闭时间，前提是isClose=true	

	});

});





function Test()

{

   alert("hello!");

}



</script>



</head>

<body>

 <div style="width:600px;margin:10px auto;height:800px;">

<a href="javascript:void(0)" id="test">

  <img src="images/test.png" />



</a>

</div>

 

</body>

</html>





/***

 * 漫画Jquery弹出层插件

 * 编写时间：2012年7月23号

 * version:manhuaDialog.1.0.js

***/

var t;//当前激活层的对象	

var _move=false;//移动标记

var _x,_y;//鼠标离控件左上角的相对位置

var newz=1;//新对象的z-index

var oldz=1;//旧对象的z-index

$(function() {

	$.fn.manhuaDialog = function(options) {

		var defaults = {

			Event : "click",								//触发响应事件

			title : "title",								//弹出层的标题

			type : "text",									//弹出层类型(text、容器ID、URL、Iframe)

			content : "content",							//弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址)

			width : 500,									//弹出层的宽度

			height : 400,									//弹出层的高度

			closeID : "closeId",							//关闭对话框的ID

			isAuto : false,									//是否自动弹出

			time : 2000,									//设置自动弹出层时间，前提是isAuto=true

			isClose : false,  								//是否自动关闭		

			timeOut : 2000									//设置自动关闭时间，前提是isClose=true

			

		};

		var options = $.extend(defaults,options);		

		$("body").prepend("<div class='floatBoxBg' id='fb"+options.title+"'></div><div class='floatBox' id='"+options.title+"'><div class='title' id='t"+options.title+"'><h4></h4><span class='closeDialog' id='c"+options.title+"'>关闭</span></div><div class='content'></div></div>");	

		var $this = $(this);								//当然响应事件对象

		var $blank = $("#fb"+options.title);						//遮罩层对象

		var $title = $("#"+options.title+" .title h4");				//弹出层标题对象

		var $content = $("#"+options.title+" .content");				//弹出层内容对象

		var $dialog = $("#"+options.title+"");						//弹出层对象

		var $close = $("#c"+options.title);						//关闭层按钮对象

		var $ttt =  $("#t"+options.title);	

		var $closeId = $("#"+options.closeID);

		var stc,st;

		if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判断IE6

			$blank.css({height:$(document).height(),width:$(document).width()});

		}

		$close.live("click",function(){

			if ($("#hangyedialog")){

				$("#hangyedialog").hide();

			}

			$blank.hide();

			$dialog.hide();			

			if(st){

				clearTimeout(st);//清除定时器

			}

			if(stc){

				clearTimeout(stc);//清除定时器

			}

		});	

		$closeId.live("click",function(){

			if ($("#hangyedialog")){

				$("#hangyedialog").hide();

			}

			$blank.hide();

			$dialog.hide();			

			if(st){

				clearTimeout(st);//清除定时器

			}

			if(stc){

				clearTimeout(stc);//清除定时器

			}

		});	

		$ttt.live("mousedown",function(e){									  

			 _move=true;

			newz = parseInt($dialog.css("z-index"))

			$dialog.css({"z-index":newz+oldz});

			//t =  $dialog;//初始化当前激活层的对象

			_x=e.pageX-parseInt($dialog.css("left"));//获得左边位置

			_y=e.pageY-parseInt($dialog.css("top"));//获得上边位置

			$dialog.fadeTo(50, 0.5);//点击后开始拖动并透明显示								 

		});

		$(document).live("mousemove",function(e){

			 if(_move){

				var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置

				var y=e.pageY-_y;

				 $dialog.css({top:y,left:x});//控件新位置			

			}							 

		});

		$ttt.live("mouseup",function(e){

			_move=false;

			 $dialog.fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明

			oldz = parseInt($dialog.css("z-index"));//获得最后激活层的z-index							 

		});

		

		$content.css("height",parseInt(options.height)-30);

		//文本框绑定事件

		$this.live(options.Event,function(e){				

			$title.html(options.title);

			switch(options.type){

				case "url":									//当类型是地址的时候					

					$content.ajaxStart(function(){

						$(this).html("loading...");

					});

					$.get(options.content,function(html){

						$content.html(html);						

					});

					break;

				case "text":								//当类型是文本的时候

					$content.html(options.content);

					break;

				case "id":									//当类型是容器ID的时候

					$content.html($("#"+options.content+"").html());

					break;

				case "iframe":								//当类型是Iframe的时候

					$content.html("<iframe src=\""+options.content+"\" width=\"100%\" height=\""+(parseInt(options.height)-40)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");

					break;

				default:									//默认情况下的时候

					$content.html(options.content);

					break;

			}

			

			$blank.show();

			$blank.animate({opacity:"0.4"},"normal");		

			$dialog.css({display:"block",left:(($(document).width())/2-(parseInt(options.width)/2)-5)+"px",top:((document.documentElement.clientHeight)/2-(parseInt(options.height)/2))+"px",width:options.width,height:options.height});

			//$dialog.animate({top:($(document).scrollTop()+options.scrollTop)+"px"},"normal");

			//$dialog.animate({top:options.scrollTop+"px"},"normal");

			if (options.isClose){

				stc = setTimeout(function (){			

					$close.trigger("click");

					clearTimeout(stc);

				},options.timeOut);	

			}

			

		});	

		if (options.isAuto){

			st = setTimeout(function (){			

				$this.trigger(options.Event);

				clearTimeout(st);

			},options.time);	

		}

	}

});
...全文
233 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
hxftgy 2013-12-09
  • 打赏
  • 举报
 回复
引用 6 楼 wzs_xyz 的回复:
插件结构太差，不灵活，换一个吧，一般弹出层组件都要提供显示及关闭的回调函数，这个居然没有 1.组件功能与按钮耦合 2.未提供应有的回调函数
能否推荐一个呢？
未知数 2013-12-09
  • 打赏
  • 举报
 回复
插件结构太差，不灵活，换一个吧，一般弹出层组件都要提供显示及关闭的回调函数，这个居然没有 1.组件功能与按钮耦合 2.未提供应有的回调函数
foolbirdflyfirst 2013-12-09
  • 打赏
  • 举报
 回复
是trigger,写错方发名了
foolbirdflyfirst 2013-12-09
  • 打赏
  • 举报
 回复
jQuery("#右上角关闭按钮").tigger("click")
hxftgy 2013-12-09
  • 打赏
  • 举报
 回复
有高人指点一下吗，急~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·
hxftgy 2013-12-07
  • 打赏
  • 举报
 回复
请问您这个应该写在哪里？
引用 1 楼 u011461314 的回复:
不出名的。 $close.live("click",function(){ if ($("#hangyedialog")){ $("#hangyedialog").hide(); } $blank.hide(); $dialog.hide(); if(st){ clearTimeout(st);//清除定时器 } if(stc){ clearTimeout(stc);//清除定时器 } });
zhjdg 2013-12-07
  • 打赏
  • 举报
 回复
不出名的。 $close.live("click",function(){ if ($("#hangyedialog")){ $("#hangyedialog").hide(); } $blank.hide(); $dialog.hide(); if(st){ clearTimeout(st);//清除定时器 } if(stc){ clearTimeout(stc);//清除定时器 } });
超级漂亮的Jquery弹出层插件
超级漂亮的Jquery弹出层插件，可支持以下功能 1、触发响应事件 2、设置弹出层的标题 3、设置弹出层类型(text、容器ID、URL、Iframe) 4、弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址) 5、...
自制JQuery弹出层插件 PopupDiv-v1.0
JQuery弹出层插件 PopupDiv-v1.0 通用自定义弹出层插件 by maxcoold 2009-2-29 bug 提交至：maxcoold@126.com --------------------------------------------- 功能说明： 本插件基于jquery 1.31下编写，请尽量在...
jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面...
简单的jQuery弹出遮罩层小插件，可移动，兼容IE678.rar
自己原创的一款简单的jQuery弹出遮罩层小插件，弹出的层可移动、也可以关闭，时间关系没有进行美化，经过测试在IE6、7、8下都没有问题，其它浏览器没有测试。
支持animate.css动画的jquery弹出层插件
jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时，配置模态窗口打开和关闭时的CSS3懂，使用非常炫酷和方便。
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章