一个非常好用的可拖动的jquery弹出层

不用解释直接上代码,代码有注释,不懂的话直接拿去用。这只是一个简单的效果,若要复杂的效果请参考http://www.hestudy.com/file/demo/tipswindown/页面挡下来。

js代码:

	$(document).ready(function(){
		var dialog_with = 400;
		var dialog_height = 200;
		var _move=false;//移动标记
		var _x,_y;//鼠标离控件左上角的相对位置
		$("#dialog_show").click(function(){
	
		$("body").css("opacity","0.2");//body加蒙板
		
		var window_width = $(window).width();
		var window_height = $(window).height();
		/*var widd = $(this).width();
		var heii = $(this).height();*/
		var left = (window_width - dialog_with)/2+"px";//距左边位置
		var top = (window_height - dialog_height)/2+"px";//距顶边位置
	
		$("#dialog").css({//设置弹出框样式
			"z-index":"5",
			"position":"absolute",
			"display":"block",
			"width":"400px",
			"height":"200px",
			"left":left,
			"top":top,
			"background":"#FFFFFF",
			"border":"1px solid #999999",
		});
	});
		
	$("#dialog_close").click(function(event){//关闭
		/*$("#dialog").css({
		"display":"none",
		"speed":"600"
		});*/
		$("#dialog").fadeOut("slow");
		$("body").fadeTo("slow",1.0);
	});
	
    $("#dialog_title").click(function(){
        //alert("click");//点击(松开后触发)
        }).mousedown(function(e){
        _move=true;
        _x=e.pageX-parseInt($("#dialog").css("left"));
        _y=e.pageY-parseInt($("#dialog").css("top"));
        $("#dialog").fadeTo(20, 0.55);//点击后开始拖动并透明显示
    });
	
	$("#dialog").mouseup(function(){
		_move=false;
		$("#dialog").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
	});

    $("#dialog_title").mousemove(function(e){
        if(_move){
            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
            var y=e.pageY-_y;
            $("#dialog").css({top:y,left:x});//控件新位置
        }
    }).mouseup(function(){
		_move=false;
		$("#dialog").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
	});					   
	})
html代码
<input type="button" value="点击" id="dialog_show"/>

<div id="dialog" style="display:none;">
<div style="background:url(headerbg.gif); width:auto; height:27px; cursor:move" id="dialog_title">
	<div style="background:url(x.gif); width:18px; height:18px; float:right; cursor:pointer" title="关闭"  id='dialog_close'></div>
</div>
	这里放弹出层内容
<br/>


</div>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值