jQuery插件轻量弹出层UIDialog

参数解释：

id         :null,  // 需要赋值的ID
callOnOpen :null,  // 弹出后调用方法
callOnClose:null,  // 关闭后调用方法
eventType  :null,  // 事件类型 click, blur, change, dblclick, error, focus, load, mousedown, mouseout, mouseup
idContent  :null,  // 需要添加的id
width      :'auto', // 宽
height     :'auto', // 高
title      :'消息',  // 标题
content    :'测试内容'  // 内容

复制代码

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
body{font:12px/2 arial; background:#ccc;}
a{color:#0029c4;text-decoration:none;}
a:hover{color:#c00;}
.wrap{ border:2px solid #aaa; background:#fff; padding:20px;}
/* uidialog */
.ui-dialog{position:fixed;min-150px;background:#fff;overflow:hidden;z-index:99999;border:5px solid #767576;}
.ui-dialog h1{*margin-top:-3px;position:relative;text-indent:1em;padding:3px 0;font-size:14px;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;-moz-user-select:none;/* FF禁止选择文字 */-webkit-user-select:none;/* Chrome禁止选择文字 */}
.ui-dialog h1 .ui-close{position:absolute;right:10px;cursor:pointer;text-indent:0;}
.ui-dialog-body{ padding:10px;}
.ui-title{ border-bottom:1px solid #ccc; background:#f0f0f0;}
.ui-mask{position:absolute;left:0;top:0;z-index:77777;background:#000;filter:alpha(opacity=50);opacity:0.5;}
/* 模拟IE6 position:fix的效果 From: http://www.blueidea.com/tech/web/2010/7665.asp */
*html{background:url(*) fixed;}
*html body{margin:0;height:100%;}
.wrap{ 500px; margin:40px auto;}
</style>

</head>
<body>
<div class="wrap">
<h2>特点：接口丰富、轻便、弹出层上层、单击遮罩层关闭。</h2>
<ol>
<li>
<h1>测试 $.fn.UIDialog 调用，并弹出层上层</h1>
<a href="javascript:void(0)">测试a链接1</a>
<table class="tab" style="display:none;">
<tr>
<th>用户名：</th>
<td><input type="text" name="" id="useranme"></td>
</tr>
<tr>
<th></th>
<td><input id="mybtn" type="submit" value="又是一个新的"></td>
</tr>
</table>
</li>
<li>
<h1>测试弹出 next() 的内容</h1>
<a href="javascript:void(0)">测试a链接2</a>
<div>
<p>扯面是一种陕西和山西的传统面食小吃，已有3000年。主要原料：上白面粉、鸡蛋、菠菜、红萝卜、调味品。</p>
<p>做扯面，和面的技术是最关键的。和面过程中有几个关键点：首先水和面的比例是一个关键，做扯面要求和的面最软，揪片次之，手擀面、刀削面最硬，做扯面一般是一斤面六两多水。和面的过程也比较重要，先把面打成面穗(水一点一点的加)，再揉成面团，兑水扎软(一般反复扎几次)，然后用湿布蒙住。醒面也是必需的，和好的面醒半小时后才好用。 </p>
</div>
</li>
<li>
<h1>多种方式调用</h1>
<a href="javascript:void(0)">测试a链接3</a>
<p>扯面是一种陕西和山西的传统面食小吃，已有3000年。</p>
<input id="btn" type="button" value="test-$.UIDialog" />
<div>热乎乎的扯面，浇上自己喜欢的调和(调料)，或番茄酱、或肉炸酱、或炖菜，配上香喷喷的老陈醋，油汪汪的红辣子，挑一根放到嘴里一吸一嘬之下，扯面特有的筋道和绵软，你只有试过才知道哦。 </div>
<input id="btn2" type="button" value="test-$.fn.UIDialog">

</li>
</ol>

<br>

</div>
<script type="text/javascript">
(function($){
$.fn.UIDialog = function(options){
var defaults = {
IE :$.browser.msie,
IE6 :$.browser.version == 6,
FIREFOX :$.browser.mozilla,
window :$(window),
document :$(document),
body :$(document.body),
id :null, // 需要赋值的ID
callOnOpen :null, // 弹出后调用
callOnClose:null, // 关闭后调用
eventType :null, // 事件类型 click, blur, change, dblclick, error, focus, load, mousedown, mouseout, mouseup
idContent :null, // 需要添加的id
width :'auto', // 宽
height :'auto', // 高
title :'消息', // 标题
content :'测试内容' // 内容
};
var opts = $.extend({}, defaults, options);

})(jQuery);

$('a').click(function(){
$.UIDialog({
content: $(this).next().html(),
id: 'testtab',
500
});
$('#testtab #mybtn').click(function(){
console.log($('#testtab').find('#useranme').val());
});
});
$('#mybtn').live('click', function(){
$.UIDialog({
content: '我是一个兵'
})
});

$('#btn').click(function(){
$.UIDialog({
content: $(this).next().html()
});
})
$('#btn2').UIDialog({
eventType: 'click',
content: '我是一个弹出层！'
})
</script>

jQuery插件轻量弹出层UIDialog

作品索引

一、jquery插件

二、js源生