当前位置：首页 → 问答吧 → 有没有弹出可拖动的遮罩层的插件？功能类似qq空间点击好友买卖的我买的起的人弹出的效果

有没有弹出可拖动的遮罩层的插件？功能类似qq空间点击好友买卖的我买的起的人弹出的效果

时间：2009-07-25

来源：互联网

作者: tomatojacky 发布时间: 2009-07-25

或者类似baidu的popup.js的效果

弹出遮罩层的效果的插件比较多，可拖动的插件也比较多，有没有把两者结合在一起的插件？

我还没有试着把弹出层插件和拖动插件放在一个页面试过。

哦，还有本论坛的批量上传的效果不错，有没有尽量简单的代码，可以很方便的调用的。大家交流一下。

当然也可以mail给我，thanks

作者: tomatojacky 发布时间: 2009-07-25

http://files.getdropbox.com/u/335315/popeye/popbox/default.html
190行JS压缩后4k，扩展方便

作者: choiceblue 发布时间: 2009-07-27

当然有了。搜firstebox就能找到

作者: jevoly 发布时间: 2009-08-24

我自己写的行不？这么简单的东西，为什么不自己搞？

复制代码

<html>
<head>
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
/** jquery dialog插件 janchie 2009
版本：1.0
*/
(function($){
$.dialog = function(width,height,content){
//插入弹出层相关元素
$("body",document).append("<div id=\"dialog_mask_bg\"></div><div id=\"dialog_box\"></div>");
$("#dialog_box").append("<div id=\"dialog_box_title\"></div><div id=\"dialog_box_html\"></div><div id=\"dialog_box_bom\"></div>");
var dialogWidth = (typeof(width)!= undefined && typeof(width)=="number" && width!="") ? width : 500 ;
var dialogHeight = (typeof(height)!= undefined && typeof(height)=="number" && height!="") ? height : 400 ;
var dialogContent = (typeof(content)!= undefined && $.trim(content)!="") ? content : "" ;
$("#dialog_box_title").append("<span id=\"dialog_close\">×</span>");
$("#dialog_close").click(dialogRemove);
$("#dialog_box_html").append(dialogContent);
newBtn("btnOK"," 确定 ");
newBtn("btnCancel"," 取消 ");
//取页面宽高度（兼容多浏览器及各种CSS渲染模式）
var getSize = (function(){
var check,obj,bodySize = [];
var check = document.compatMode == "BackCompat" ? false : true;
var obj = check ? document.documentElement : document.body;
with(obj){
bodySize[0] = scrollWidth>clientWidth ? scrollWidth : clientWidth;
bodySize[1] = scrollHeight>clientHeight ? scrollHeight : clientHeight;
bodySize[2] = clientWidth;
bodySize[3] = clientHeight;
}
return bodySize;
})();
var bodyWidth = getSize[0];
var bodyHeight = getSize[1];
var dialogX = (getSize[2]-dialogWidth)/2 > 0 ? (getSize[2]-dialogWidth)/2 : 0;
var dialogY = (getSize[3]-dialogHeight)/2 > 0 ? (getSize[3]-dialogHeight)/2 : 0;
//边框尺寸
var dialogBorder = 1;
//弹出层盒子显示
$("#dialog_box").css({"background":"#069","position":"absolute","border":dialogBorder+"px solid #069","z-index":"102"})
.css({"left":dialogX+"px","top":dialogY+"px","width":dialogWidth+"px","height":dialogHeight+"px"});
//弹出层标题栏
$("#dialog_box_title").css({"width":dialogWidth+"px","height":"25px","color":"#FFF","cursor":"move","z-index":"104"})
.css("background","url(dialog_title_bg.gif) repeat-x top #EEE")
.mousedown(function(e){ dialogDrag($(this).parent(),e); });
$("#dialog_close").css({"float":"right","padding":"2px","cursor":"hand","cursor":"pointer"});
//弹出层详细内容区
$("#dialog_box_html").css({"background":"#FFF","width":dialogWidth+"px","height":dialogHeight-50+"px","z-index":"106"});
//弹出层底部
$("#dialog_box_bom").css({"background":"#EEE","width":dialogWidth+"px","height":"25px","z-index":"108"});
//遮罩层背景显示
$("#dialog_mask_bg").css({"background":"#CCC","position":"absolute","opacity":"0","z-index":"100"})
.css({"top":"0px","left":"0px","width":bodyWidth+"px","height":bodyHeight+"px"})
.animate({"opacity":"0.6"},"normal");
bgiframe($("#dialog_mask_bg"));
//遮罩层缩放自适应
//$(window).resize(function(){
// $("#dialog_mask_bg").css({"width":"0px","height":"0px"});
// var reBodySize = getBodySize;
// $("#dialog_mask_bg").width(reBodySize[0])
// .height(reBodySize[1]);
//});
//弹出层移除
function dialogRemove(){
$("#dialog_mask_bg").fadeOut("fast",function(){ $(this).remove();});
$("#dialog_box").remove();
}
// 创建底部按钮
function newBtn(name,value,fn){
var btnObj = "<input type=\"button\" name=\""+name+"\" id=\""+name+"\" value=\""+value+"\" />";
var f = $.isFunction(fn) ? fn : dialogRemove;
$("#dialog_box_bom").append(btnObj)
.css({"text-align":"center"});
$("#"+name).click(f);
}
// 拖拽实现
function dialogDrag(target,e) {
var deltaX= e.clientX - target[0].offsetLeft;
var deltaY= e.clientY - target[0].offsetTop;
var drag = true;
$(document).bind("mousemove",function(ev){
if (drag) {
var Y = ev.clientY-deltaY;
var X = ev.clientX-deltaX;
var H = bodyHeight-target[0].offsetHeight;
var W = bodyWidth-target[0].offsetWidth;
if(Y>0 || X>0){
if (Y>=H){ target.css("top",H+"px"); }else{ target.css("top",Y+"px"); }
if (X>=W){ target.css("left",W+"px"); }else{ target.css("left",X+"px"); }
}
if(Y<=0) target.css("top","0px");
if(X<=0) target.css("left","0px");
}
})
.bind("mouseup",function(){
drag = false;
$(this).unbind("mousemove")
.unbind("mouseup");
});
}
// 背景iframe，防select控件被遮罩无效，改自jqueryui
function bgiframe(elm){
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="javascript:false;"'+
'style="display:block;position:absolute;z-index:-1;filter:Alpha(Opacity=\'0\');'+
'top:expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\');'+
'left:expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\');'+
'width:expression(this.parentNode.offsetWidth+\'px\');'+
'height:expression(this.parentNode.offsetHeight+\'px\');"/>';
return elm.each(function() {
if ( $('> iframe.bgiframe', this).length == 0 )
this.insertBefore( document.createElement(html), this.firstChild );
});
}
return elm;
}
}
})(jQuery);
///--------使用---------------------------------------------------------------------------
$(function(){
$("#btn1").click(function(){
$.dialog(300,200,"内容");
});
})
</script>
</head>
<body>
<input type="button" value="测试" id="btn1">
<p> </p>
<select name="test2">
<option>adfdsafdsfdsafdsafsdaf</option>
</select>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>