jquery点击弹出可放大居中关闭对话框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery点击弹出可放大居中关闭对话框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>jquery点击弹出可放大居中关闭对话框</title>
<link rel="stylesheet" type="text/css" href="css/jqpopup.css"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="js/jqDnR.min.js"></script>
<script type="text/javascript" src="js/jquery.jqpopup.min.js"></script>
</head>
<body>
<div id="sampleformdiv" style="display:none" title="1st jQpopup box">
	<div class="annotationName">描述</div>
	<div class="annotation">点击关闭该弹出窗口</div>
</div>
<div id="sampleformdiv1" style="display:none" title="模块选择器">
	<form method="post" id="butt" name="butt" action="">
		<input type="button" value="确定"/>
		<input type="button" value="取消"/>
	</form>
	<div class="sele">
		<select class="u">
			<option value="CMS">CMS</option>
			<option value="General" selected="">General</option>
			<option value="Else">Else</option>
		</select>
		<select class="u">
			<option value="CMS">CMS</option>
			<option value="General" selected="">General</option>
			<option value="Else">Else</option>
		</select>
		<select class="u">
			<option value="CMS">CMS</option>
			<option value="General" selected="">General</option>
			<option value="Else">Else</option>
		</select>
	</div>

	<table border="1" cellpadding="2" cellspacing="2">
		<tr>
			<td></td>
			<td>名称</td>
			<td>标签</td>
			<td>前缀</td>
			<td>...</td>
		</tr>
		<tr>
			<td><input type="radio" value="radio" name="r1" id="r1"></td>
			<td>分类控件</td>
			<td>2</td>
			<td>re</td>
			<td>222</td>
		</tr>
		<tr>
			<td><input type="radio" value="radio" name="r2" id="r2"></td>
			<td>分类控件</td>
			<td>2</td>
			<td>re</td>
			<td>222</td>
		</tr>
		<tr>
			<td><input type="radio" value="radio" name="r3" id="r3"></td>
			<td>分类控件</td>
			<td>2</td>
			<td>re</td>
			<td>222</td>
		</tr>
		<tr>
			<td><input type="radio" value="radio" name="r4" id="r4"></td>
			<td>分类控件</td>
			<td>2</td>
			<td>re</td>
			<td>222</td>
		</tr>
		<tr>
			<td><input type="radio" value="radio" name="r5" id="r5"></td>
			<td>分类控件</td>
			<td>2</td>
			<td>re</td>
			<td>222</td>
		</tr>
	</table>
</div>
<p><input type="button" class="stdbtn" id="open_btn" value="Click 1"/></p><br/>
<p><input type="button" class="stdbtn" id="open_btn1" value="Click 2"/></p><br/>
<script type="text/javascript">
$(document).ready(function(){

	$("#open_btn").click(function(){
		$("#sampleformdiv").jqpopup_open(this.id);
	});


	$("#open_btn1").click(function(){
		$("#sampleformdiv1").jqpopup_open(this.id);
	});

});
</script>
</body>
</html>

JS代码(jqDnR.min.js):

/* * jqDnR - Minimalistic Drag'n'Resize for jQuery. * * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>,http://www.iceburg.net * Licensed under the MIT License:* http://www.opensource.org/licenses/mit-license.php * * $Version:2007.08.19 +r2 */
(function($){
	$.fn.jqDrag = function(h){
	return i(this,h,"d")}
;
	$.fn.jqResize = function(h){
	return i(this,h,"r")}
;
	$.jqDnR ={
	dnr:{
}
,e:0,drag:function(v){
	if (M.k == "d"){
	E.css({
	left:M.X + v.pageX - M.pX,top:M.Y + v.pageY - M.pY}
)}
else{
	E.css({
	width:Math.max(v.pageX - M.pX + M.W,300),height:Math.max(v.pageY - M.pY + M.H,150)}
)}
return false}
,stop:function(){
	$().unbind("mousemove",J.drag).unbind("mouseup",J.stop)}
}
;
	var J = $.jqDnR,M = J.dnr,E = J.e,i = function(e,h,k){
	return e.each(function(){
	h = (h) ? $(h,e):e;
	h.bind("mousedown",{
	e:e,k:k}
,function(v){
	var d = v.data,p ={
}
;
	E = d.e;
	if (E.css("position") != "relative"){
	try{
	E.position(p)}
catch(e){
}
}
M ={
	X:p.left || f("left") || 0,Y:p.top || f("top") || 0,W:f("width") || E[0].scrollWidth || 0,H:f("height") || E[0].scrollHeight || 0,pX:v.pageX,pY:v.pageY,k:d.k,o:E.css("opacity")}
;
	$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop).mousedown($.jqDnR.stop);
	return false}
)}
)}
,f = function(k){
	return parseInt(E.css(k)) || false}
}
)(jQuery);

CSS代码(jqpopup.css):

@charset "utf-8";/* ================================ ȫ����ʽ ================================ */
*{margin:0px;border:none;padding:0px;font-size:12px;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,lengend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5em Tahoma,Helvetica,Arial,sans-serif;color:#000000;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
h1{font-size:18px;}
h2{font-size:16px;}
h3{font-size:14px;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp,tt{font-family:"Courier New",Courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
/* a style */
a{text-decoration:none;color:#000000;}
a:hover{text-decoration:none;color:#ff0000;}
button,input,select,textarea{border:1px solid #CCCCCC;font-size:100%;}
hr{border:none;height:1px;}
html{overflow-y:scroll;}
.clear{clear:both;}
/* ================================ ��Ҫ��ʽ ================================ */
.stdbtn{background:url("../images/108.gif") no-repeat scroll 0 0 transparent;color:#FFFFFF;font-size:13px;font-weight:bold;height:27px;width:91px;margin-left:30px;margin-top:30px;}
.jqpopup{background:#FFFFFF;position:absolute;z-index:1;border:1px solid #CCCCCC;display:none;min-height:150px;width:300px;}
.jqpopup_header{background:none repeat scroll 0 0 #CCCCCC;border:1px solid #AAAAAA;font-size:12px;height:24px;line-height:24px;margin:5px;_margin:5px;text-indent:10px;cursor:move;}
.jqpopup_footer{padding-left:10px;padding-right:10px;padding-bottom:5px;text-align:right;font-size:10px;}
.jqpopup_content{padding-left:10px;padding-right:10px;padding-bottom:5px;}
.jqpopup_message{padding-top:10px;padding-left:10px;padding-right:10px;color:red;font-size:12px;font-weight:bold;}
.jqpopup_resize{background:url("../images/jqresize.gif") no-repeat #FFFFFF;height:14px;width:16px;position:absolute;bottom:0;right:0;cursor:se-resize;}
.jqpopup_cross{background:url("../images/jqcross.jpg") no-repeat #A4C7EE;height:14px;width:16px;position:absolute;right:11px;top:11px;cursor:pointer;}
.jqpopup_center{background:url("../images/jqcenter.jpg") no-repeat #FFFFFF;height:14px;width:16px;position:absolute;bottom:0;left:0;cursor:pointer;}
.annotationName{font-weight:bold;margin-bottom:0.2em;white-space:nowrap;}
.u{margin-right:5px;padding-left:5px;width:80px;}
.u option{padding-right:5px;}
#sampleformdiv1 table{border-collapse:collapse;width:100%;margin:15px 0 15px;}
#sampleformdiv1 table tr td{border:1px solid #cccccc;text-align:center;padding:3px;}
#sampleformdiv1_ph{background:none repeat scroll 0 0 #176CED;color:#FFFFFF;}
#butt{position:absolute;right:40px;top:9px;}

附件:下载该文件资源,减少时间成本(增值服务)