弹出对话框jQuery插件Dialog js代码

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

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

以下是弹出对话框jQuery插件Dialog js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出对话框jQuery插件Dialog</title>
<link rel="Stylesheet" type="text/css" href="css/DialogBySHF.css" />
<style type="text/css">
input[type='button']{margin:100px 20px;padding: 10px;}
</style>
</head>
<body>
<center><br/>
    <input type="button" value="弹出提示框" id="btnAlert" />
    <input type="button" value="弹出确认框" id="btnConfirm" />
    <input type="button" value="弹出iframe" id="btnDialog" />
</center>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/DialogBySHF.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnAlert").click(function () {
            $.DialogBySHF.Alert({ Width: 350, Height: 200, Title: "内容", Content: '你好，这是弹出提示，即JS中的alert', ConfirmFun: test });
        })
        $("#btnConfirm").click(function () {
            $.DialogBySHF.Confirm({ Width: 350, Height: 200, Title: "提示信息", Content: '你好，这是确认信息，类似于JS中的confirm', ConfirmFun: test, CancelFun: testCancel });
        })
        $("#btnDialog").click(function () {
            $.DialogBySHF.Dialog({ Width: 1024, Height: 500, Title: "内容", URL: '#' });
        })
    })
    function test() {
        $.DialogBySHF.Alert({ Width: 350, Height: 200, Title: "确认后执行方法", Content: '确认后执行的方法' });
    }
    function testCancel() {
        $.DialogBySHF.Alert({ Width: 350, Height: 200, Title: "取消后执行方法", Content: '取消后执行的方法' });
    }
</script>
</body>
</html>

JS代码(DialogBySHF.js):

;
	(function ($){
	//默认参数 var PARAMS;
	var DEFAULTPARAMS ={
	Title:"素材家园",Content:"",Width:400,Height:300,URL:"",ConfirmFun:new Object,CancelFun:new Object}
;
	var ContentWidth = 0;
	var ContentHeight = 0;
	$.DialogBySHF ={
	//弹出提示框 Alert:function (params){
	Show(params,"Alert");
}
,//弹出确认框 Confirm:function (params){
	Show(params,"Confirm");
}
,//弹出引用其他URL框 Dialog:function (params){
	Show(params,"Dialog")}
,//关闭弹出框 Close:function (){
	$("#DialogBySHFLayer,#DialogBySHF").remove();
}
}
;
	//初始化参数 function Init(params){
	if (params != undefined && params != null){
	PARAMS = $.extend({
}
,DEFAULTPARAMS,params);
}
ContentWidth = PARAMS.Width - 10;
	ContentHeight = PARAMS.Height - 40;
}
;
	//显示弹出框 function Show(params,caller){
	Init(params);
	var screenWidth = $(window).width();
	var screenHeight = $(window).height();
	//在屏幕中显示的位置（正中间） var positionLeft = (screenWidth - PARAMS.Width) / 2 + $(document).scrollLeft();
	var positionTop = (screenHeight - PARAMS.Height) / 2 + $(document).scrollTop();
	var Content = [];
	Content.push("<div id=\"DialogBySHFLayer\"></div>");
	Content.push("<div id=\"DialogBySHF\" style=\"width:" + PARAMS.Width + "px;
	height:" + PARAMS.Height + "px;
	left:" + positionLeft + "px;
	top:" + positionTop + "px;
	\">");
	Content.push(" <div id=\"Title\"><span>" + PARAMS.Title + "</span><span id=\"Close\">&#10005;
	</span></div>");
	Content.push(" <div id=\"Container\" style=\"width:" + ContentWidth + "px;
	height:" + ContentHeight + "px;
	\">");
	if (caller == "Dialog"){
	Content.push("<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" src=\"" + PARAMS.URL + "\" ></iframe>");
}
else{
	var TipLineHeight = ContentHeight - 60;
	Content.push(" <table>");
	Content.push(" <tr><td id=\"TipLine\" style=\"height:" + TipLineHeight + "px;
	\">" + PARAMS.Content + "</td></tr>");
	Content.push(" <tr>");
	Content.push(" <td id=\"BtnLine\">");
	Content.push(" <input type=\"button\" id=\"btnDialogBySHFConfirm\" value=\"确定\" />");
	if (caller == "Confirm"){
	Content.push(" <input type=\"button\" id=\"btnDialogBySHFCancel\" value=\"取消\" />");
}
Content.push(" </td>");
	Content.push(" </tr>");
	Content.push(" </table>");
}
Content.push(" </div>");
	Content.push("</div>");
	$("body").append(Content.join("\n"));
	SetDialogEvent(caller);
}
//设置弹窗事件 function SetDialogEvent(caller){
	//添加按钮关闭事件 $("#DialogBySHF #Close").click(function (){
	$.DialogBySHF.Close();
}
);
	//添加ESC关闭事件 $(window).keydown(function(event){
	var event = event||window.event;
	if(event.keyCode===27){
	$.DialogBySHF.Close();
}
}
);
	//添加窗口resize时调整对话框位置 $(window).resize(function(){
	var screenWidth = $(window).width();
	var screenHeight = $(window).height();
	var positionLeft = parseInt((screenWidth - PARAMS.Width) / 2+ $(document).scrollLeft());
	var positionTop = parseInt((screenHeight - PARAMS.Height) / 2+ $(document).scrollTop());
	$("#DialogBySHF").css({
	"top":positionTop+"px","left":positionLeft+"px"}
);
}
);
	$("#DialogBySHF #Title").DragBySHF($("#DialogBySHF"));
	if (caller != "Dialog"){
	$("#DialogBySHF #btnDialogBySHFConfirm").click(function (){
	$.DialogBySHF.Close();
	if ($.isFunction(PARAMS.ConfirmFun)){
	PARAMS.ConfirmFun();
}
}
)}
if (caller == "Confirm"){
	$("#DialogBySHF #btnDialogBySHFCancel").click(function (){
	$.DialogBySHF.Close();
	if ($.isFunction(PARAMS.CancelFun)){
	PARAMS.CancelFun();
}
}
)}
}
}
)(jQuery);
	//拖动层(function ($){
	$.fn.extend({
	DragBySHF:function (objMoved){
	return this.each(function (){
	//鼠标按下时的位置 var mouseDownPosiX;
	var mouseDownPosiY;
	//移动的对象的初始位置 var objPosiX;
	var objPosiY;
	//移动的对象 var obj = $(objMoved) == undefined ? $(this):$(objMoved);
	//是否处于移动状态 var status = false;
	//鼠标移动时计算移动的位置 var tempX;
	var tempY;
	$(this).mousedown(function (e){
	status = true;
	mouseDownPosiX = e.pageX;
	mouseDownPosiY = e.pageY;
	objPosiX = obj.css("left").replace("px","");
	objPosiY = obj.css("top").replace("px","");
}
).mouseup(function (){
	status = false;
}
);
	$("body").mousemove(function (e){
	if (status){
	tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(objPosiX);
	tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(objPosiY);
	obj.css({
	"left":tempX + "px","top":tempY + "px"}
);
}
//判断是否超出窗体 //计算出弹出层距离右边的位置 var dialogRight = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
	//计算出弹出层距离底边的位置 var dialogBottom = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
	var maxLeft = $(window).width()-obj.width();
	var maxTop = $(window).height()-obj.height();
	if(parseInt(obj.css("left"))<=0){
	obj.css("left","0px");
}
if(parseInt(obj.css("top"))<=0){
	obj.css("top","0px");
}
if(dialogRight<=0){
	obj.css("left",maxLeft+'px');
}
}
).mouseup(function (){
	status = false;
}
).mouseleave(function (){
	status = false;
}
);
}
);
}
}
)}
)(jQuery);

CSS代码(DialogBySHF.css):

#DialogBySHFLayer{width:100%;height:100%;left:0;top:0;position:fixed;z-index:500;background-color:#333333;filter:alpha(Opacity=40);-moz-opacity:0.4;opacity:0.4;}
/*弹出的提示框*/
#DialogBySHF{position:absolute;border-radius:3px;box-shadow:0 0 8px rgba(0,0,0,.8);background-color:#f2f2f2;z-index:600;}
#DialogBySHF #Title{margin:0;width:100%;height:35px;background-color:#ffa500;color:#FFFFFF;font-family:'microsoft yahei';font-size:18px;text-align:center;cursor:move;line-height:35px;border-radius:3px 3px 0 0;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
#DialogBySHF #Close{position:absolute;right:7px;top:6px;height:21px;line-height:21px;width:21px;cursor:pointer;display:block;border:1px solid #da8e02;box-shadow:0 0 4px rgba(255,255,255,.9);border-radius:3px;}
#DialogBySHF #Container{padding:0px 5px 5px 5px;/*width:390px;height:355px;*/
}
#DialogBySHF #Container table,#DialogBySHF #Container iframe{width:100%;height:100%;}
#DialogBySHF #Container table td{vertical-align:middle;}
#DialogBySHF #Container table #TipLine{padding:0 30px;font-family:'microsoft yahei';}
#DialogBySHF #Container table #BtnLine{height:60px;text-align:center;}
#DialogBySHF #Container table #BtnLine input{margin:6px 11px;-moz-user-select:none;background-color:#F5F5F5;background-image:-moz-linear-gradient(center top,#F5F5F5,#F1F1F1);background-image:-ms-linear-gradient(rgb(245,245,245),rgb(241,241,241));background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);border:1px solid rgba(0,0,0,0.1);*border:1px solid #DDDDDD;border:1px solid #DDDDDD\0;border-radius:2px;font-family:'microsoft yahei';color:#666666;cursor:default;font-size:12px;font-weight:bold;height:29px;line-height:27px;min-width:54px;padding:0 8px;text-align:center;}
#DialogBySHF #Container table #BtnLine input:hover{background-color:#F8F8F8;background-image:-moz-linear-gradient(center top,#F8F8F8,#F1F1F1);border:1px solid #C6C6C6;box-shadow:0 1px 1px rgba(0,0,0,0.1);color:#333333;}
#DialogBySHF #Container table #BtnLine input:focus{border:1px solid #4D90FE;outline:medium none;}

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