html示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>基于jquery的弹窗插件</title>
<link rel="icon" href="../../img/favicon.ico" type="image/ico">
<script src="../../jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.dialog.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body style="overflow: hidden;">
<input type="button" id="cDialog" value="点击" />
</body>
<script type="text/javascript">
var dialog = new Dialog({
dialogBoxClass :"layerBox",
dialogclass:"",
width:300,
height:200,
zIndex:1000,
dialogTitle:"信息",
setOverflow:"overflow-y:scroll",
callback: function () {}
});
$("#cDialog").click(function(){
dialog.show();
});
</script>
</html>
js代码
/**
* @Author: zql
* @Version:1.0
* Licensed under the MIT license
*/
function clientSize(){
return {
view:function(){
return {
//w:可视区域的宽度 h:可视区域的高度
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
}
}
}
}
;(function(){
if(window["Layer"]){
window["Layer"].size = clientSize();
}else{
window.Layer = {size:clientSize()};
}
})();
function Dialog(options){
this.defaults = {
dialogBoxClass :"layerBox",
dialogclass:"",
width:300,
height:200,
zIndex:1000,
dialogTitle:"信息",
setOverflow:"overflow-y:scroll",
contentId:"zqlDialogContentId",
contentOverflow:true,
callback: function () {}
};
$.extend(this.defaults,options);
}
Dialog.prototype = {
//创建弹出窗
_createDialog:function(state){
var that = this;
var size = Layer.size.view();
var time=new Date().getTime();
var style='user-select:none;cursor:default;float:right;width:30px;height:30px;font-size:20px;text-align:center;margin-left:1px;';
var dialogHtml = $(
'<div class="zql-mask-layer-'+time+'" style="z-index:'+(that.defaults.zIndex++)+';width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;background:rgb(182, 182, 182) none repeat scroll 0% 0%;opacity: 0.5;"></div>'+
'<div style="position:relative;background:white;padding:0px;width:'+that.defaults.width+'px;position:absolute;top:'+(size.h-that.defaults.height)/2+'px;left:'+(size.w-that.defaults.width)/2+'px;z-index:'+(that.defaults.zIndex++)+';">'+
'<style>.zql-btn-'+time+'{color:gray;} .zql-btn-'+time+':hover{color:black;}</style>'+
'<div zql_c="title" style="border-bottom:1px solid #cccccc;background:#f8f8f8;height:30px;color:#f8f8f8;overflow:hidden;cursor:move;">'+
'<div zql_c="titleStr" style="text-overflow:ellipsis;white-space:nowrap;float:left;font-size:13px;color:black;line-height:30px;margin-left:5px;">'+that.defaults.dialogTitle+'</div>'+
'<div style="position:absolute;right:0;background:#f8f8f8;">'+
'<div class="zql-btn-'+time+'" zql_btn="close" title="关闭" style="'+style+'">×</div>'+
'</div>'+
''+
''+
'</div>'+
'<div id = ' + that.defaults.contentId + ' zql_c="content" style="'+(that.defaults.contentOverflow ? "overflow-y:auto" : "")+';background:white;border-bottom1:1px solid red;background:;height:'+that.defaults.height+'px;"></div>'+
'<div zql_c="buttom" style="height:1px;background:#eee;">'+
'<div zql_btn="resize" style="user-select:none;cursor:se-resize;position:absolute;right:0;bottom:0;width:8px;height:13px;font-size:15px;">'+
'<div style="position:absolute;border-bottom:3px solid #000000;border-left:3px solid transparent;border-right:3px solid transparent;transform:rotateZ(135deg);top:10px;left:4px;"></div>'+
'</div>'+
'</div>'+
'</div>'
);
$("body").append(dialogHtml);
dialogHtml.find('[zql_btn=close]').click(function(){
that.closeDialog(dialogHtml);
});
//遮罩层点击事件
$(dialogHtml[0]).click(function(){
that.closeDialog(dialogHtml);
});
if(that.defaults.callback){
that.defaults.callback.apply(this,[]);
}
return dialogHtml;
},
//关闭弹出窗
closeDialog:function(obj){
if(obj){
obj[0].remove();
obj[1].remove();
}
},
//移动弹出窗
moveDialog:function(obj){
var that = this;
var lamp = $(obj[0]);//遮罩层
obj.find('[zql_c=title]').mousedown(function(e){
var titleObj = $(this);
var dialogObj = titleObj.parent();
e.stopPropagation();//阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
/*
* event.preventDefault()
* 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。
* 例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。
* 注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。
* 无论哪种情况，调用该方法都没有作用。
*/
e.preventDefault();//取消事件的默认动作
var x = e.clientX - titleObj.offset().left;//鼠标在标题栏的x轴位置
var y = e.clientY - titleObj.offset().top;//鼠标在标题栏的y轴位置
//鼠标移动事件
$(document).mousemove(function(e){
var left = e.clientX - x;//弹出窗到屏幕左边的距离
var top = e.clientY - y;//弹出窗到屏幕顶部的距离
var moreW = lamp.width()-dialogObj.width();//能移动的最大宽度=遮罩层宽度-弹出窗宽度
var moreH = lamp.height()-dialogObj.height();//能移动的最大高度=遮罩层高度-弹出窗高度
/*
* 不允许弹出窗超出遮罩层
*/
left = left<0?0:left;
left = left>moreW?moreW:left;
top = top<0?0:top;
top = top>moreH?moreH:top;
dialogObj.css({left:left+'px',top:top+'px'});
var attributes = e.target.attributes;
var targetObj;
if (attributes) {
targetObj = e.target.attributes['zql_c'];
}
if (!targetObj || (targetObj['zql_c'] && targetObj.value != 'title')) {
$(this).unbind('mousemove');//取消绑定的鼠标移动事件
}
});
//鼠标停止事件
$(document).mouseup(function(){
$(this).unbind('mousemove');//取消绑定的鼠标移动事件
});
});
},
//手动调整弹出窗大小
revampSize:function(obj){
var that = this;
var lamp = $(obj[0]);//遮罩层
var dialogObj = $(obj[1]);
obj.find('[zql_btn=resize]').mousedown(function(e){
var resizeObj = $(this);
e.stopPropagation();//阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
e.preventDefault();//取消事件的默认动作
var x = e.clientX - resizeObj.parent().parent().width();//屏幕到弹出窗左边的距离
var y = e.clientY - resizeObj.parent().parent().height();//屏幕到弹出窗顶部的距离
var revampW = lamp.width()-x;//能调整的最大宽度=遮罩层宽度-屏幕到弹出窗左边的距离
var revampH = lamp.height()-y-3;//能调整的最大高度=遮罩层高度-屏幕到弹出窗顶部的距离，3是下三角的高度
$(document).mousemove(function(e){
var width = e.clientX - x;
var height = e.clientY - y;
width=width<300?300:width;//最小宽为300
width=width>revampW?revampW:width;
height=height<231?231:height;//最小高为231，其中200是内容高度，31是标题高度
height=height>revampH?revampH:height;
dialogObj.css({width:width+"px",height:height+"px"});
dialogObj.find('[zql_c=content]').css({height:(height-31)+"px"});
});
//鼠标停止事件
$(document).mouseup(function(){
$(document).unbind("mousemove");//取消绑定的鼠标移动事件
});
});
},
show:function(){
var dialogObj = this._createDialog();
this.moveDialog(dialogObj);
this.revampSize(dialogObj);
}
}
;(function(){
if(window["Layer"]){
window["Layer"].dialog = Dialog();
}else{
window.Layer = {dialog:Dialog()};
}
})();
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
