jquery自定义插件——window实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

该示例实现弹出窗口效应：

1、jquery.show.js

/*

 * 开发人员：lzugis

 * 开发时间：2014年6月10日

 * 实现功能：点击在鼠标位置显示div

 * 版本号序号：1.0

 */

(function($){

 	$.fn.showDIV = function(options){

		var defaults = {};

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

		var showdiv=$(this);

		var close, title, content;

		close=$("<div class='close'></div>");

		title=$("<div class='title'></div>");

		content=$("<div class='content'></div>");

		showdiv.html("");

		showdiv.append(close);

		showdiv.append(title);

		showdiv.append(content);

		close.html("X");

		title.html(options.title);

		content.html(options.content);

		showdiv.css("display","block");

		showdiv.css("position","absolute");

		showdiv.css("left",($(window).width()-options.width)/2+"px");

		showdiv.css("top",($(window).height()-options.height)/2+"px");

		showdiv.css("width",options.width);

		showdiv.css("height",options.height);

		close.bind("click",function(){

			showdiv.css("display","none");

		});

	};

})(jQuery);

2、jquery.showdiv.css

body div

{

	font-size:12px;

	text-align:center;

}

#container

{

	background-color:#CCC;

	border:1px solid #000;

	width:1024px;

	height:600px;

}

#showdiv

{

	background-color:#FF0;

	width:100px;

	height:100px;

	display:none;

	z-index:99;

}

.title

{

	padding:10px;

	background:#F39;

	font-weight:bold;

	text-align:center;

	color:#FFF;

}

.close

{

	margin:5px;

	position:absolute;

	right:0px;

	top::0px;

	padding:5px;

	color:#000;

	background:#FFF;

}

.close:hover

{

	cursor:pointer;

	background:#CCC;

}

.content

{

	text-align:left;

	padding:10px;

}

3、demo.html

<!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=utf-8" />

<title>ShowDiv Demo</title>

<link rel="stylesheet" type="text/css" href="jquery/jquery.showdiv.css"/>

<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script type="text/javascript" src="jquery/jquery.showdiv.js"></script>

<script type="text/javascript">

	$(document).ready(function (){

    	$('#show').bind("click", function(evt){

			var showdiv = $('#showdiv').showDIV({

				width:400,

				height:200,

				title:"我不是黄蓉",

				content:"我不是黄蓉<br />我不会武功<br />我仅仅要靖哥哥<br />完美的爱情"

			});

		});

	});

</script>

</head>

<body>

<input id="show" name="showDiv" type="button" value="显示" />

<div id="showdiv"></div>

</body>

</html>

实现后的效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="695" height="534" alt="">

在此只是抛砖引玉，同时也为录制自己的小的学习过程。