Jquery弹出层带确认框取消及拖动效果

找阿找,找到一个以前空余时间写的一个Jquery弹窗插件,代码简单易懂,用的很多都是CSS,调用起来也方便,下面具体说说这个插件的功能及调用方法;

函数的调用

tq(宽度,高度,弹出内容”);

参数比较少,需要的话可以自己看看源码加上所需要的功能。在弹出窗口后,有两个按钮是关闭窗口的,因为没有数据操作,所以把确认按钮也一样做成关闭了,不过可以自己该一下,点确认按钮的时候要执行什么样的操作或事件,标题还带拖动功能,已经绑定窗口事件,浏览器窗口变化的时候,弹出层会自动居中。

事件ID说明:ID名为close、qclose的是关闭弹窗的按钮,ID为jclose的是确认按钮。

这个插件可以实现如删除数据之类的确认操作,对用户体验较好。数据包给出,需要的朋友可以下载来研究研究,如果有地方写得不合理,可以提出来,我好改进。

弹出窗口

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery弹出层带确认框取消及拖动效果</title>
<style>
body {position:relative; background:#eee; margin:0; padding:0;}
#Pop {background:#fff; position:fixed; left:0; top:0; font-size:13px;  text-align:center; color:#333; z-index:999; border:solid 1px #09f}
#Pop #ptitle {height:24px; line-height:25px; background:#09f; color:#fff; font-weight:bold; font-size:13px; text-indent:10px; text-align:left;}
#Pop #close {position:absolute; right:2px; top:-1px; width:24px; height:24px; background:url(image/close.png) no-repeat left 0;}
#Pop #close:hover { background:url(image/close.png) no-repeat left -24px; cursor:pointer;}
#Pop .button {width:auto; margin:0 auto; position:absolute; top:76px; left:30px;}
#Pop .button input {width:46px; height:20px; line-height:20px; background:url(image/button.jpg) no-repeat left 0; border:solid 1px #08F; color:#fff; margin-left:18px; font-size:12px;}
#Pop .button input:hover { background:url(image/button.jpg) no-repeat left -20px; cursor:pointer;}
#Pop #xx {position:absolute; right:0; top:0; cursor:pointer;}
#Pop p {margin-top:10px;}
#Pop p img { position:relative; top:3px; margin-right:3px;}
</style>
<script type="text/javascript" src="js/jQuery1.9.1.js"></script>
<script>
$(document).ready(function() {
$("#button").click(function() {
tq(210,110,html="<p><img src='image/g.png' border='0' />恭喜你,注册成功!</p>");   //调用弹窗函数
});
var winheight=$(window).height();                 //获取浏览器可视高度与宽度
var winwidth=$(window).width();                   //创建一个div 并且赋值
//屏蔽窗口
function divbody() {
var divbody=$("<div id='divbody' />");
divbody.animate({"opacity":0.3},0);
divbody.css({"width":winwidth+"px","height":winheight,"background":"#ccc","z-index":998,"position":"fixed","left":0,"top":0});
$("body").prepend(divbody);
};
function tq(divwidth,divheight,html) {           //定义函数tjquery  传三个值,一个是弹窗宽度divwidth,高度divheight,弹窗内容html
divbody();
var Pop=$("<div id='Pop'><div id='ptitle'>确 认</div><div id='close' title='关闭'></div><div class='button'><input id='jclose' type='button' value='确认' /><input id='qclose' type='button' value='取消' /></div></div>");                //将传过来的内容写到新创建的DIV中
Pop.append(html);
var divwin=divwidth/2;
var divhei=divheight/2;
divwin=winwidth/2-divwin;
divhei=winheight/2-divhei;
Pop.animate({"opacity":0.8},0);                   //渐影
Pop.animate({"opacity":1.0},"slow");
Pop.css({"width":divwidth+"px","height":divheight+"px","left":(divwin-8)+"px","top":(divhei-70)+"px"});   //将DIV进行定位居中
$("body").prepend(Pop);                           //将DIV写到body中

$('#pop .ptitle').css({'width':divwidth+'px'});
$(function(){
$.Move('Pop');
});
//关闭窗口
$('#Pop #close,#qclose,#jclose').click(function() {
$('#divbody,#Pop').fadeOut('fast',function() {
$('#divbody,#Pop').remove();
});
});

};
//弹窗监听函数调用
function tjtanchuang(divwidth,divheight) {           //监听函数调用值
var divbody=$("#divbody");
divbody.css({"width":divwidth+"px","height":divheight});
var Pop=$("#Pop");               //获取元素
var winl=Pop.width();
var winh=Pop.height();
winl=winl/2;
winh=winh/2;
var divwin=divwidth/2-winl;
var divhei=divheight/2-winh;
Pop.css({"left":(divwin-8)+"px","top":(divhei-40)+"px"});   //将DIV进行定位居中
};
//窗口监听函数
$(window).resize(function () {
var divwidth=$(window).width();
var divheight=$(window).height();
tjtanchuang(divwidth,divheight);
});
});
(function($){
//拖拽插件,参数:id或object
$.Move = function(_this){
if(typeof(_this)=='object'){
_this=_this;
}else{
_this=$("#"+_this);
}
if(!_this){return false;}

_this.css({'position':'absolute'}).hover(function(){$("#ptitle").css("cursor","move");},function(){$("#ptitle").css("cursor","default");})
$("#ptitle").mousedown(function(e){//e鼠标事件
e.preventDefault();
var offset = $(this).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
_this.css({'opacity':'0.5','border':'dashed 1px #000'});
$(document).bind("mousemove",function(ev){//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件
_this.bind('selectstart',function(){return false;});
var _x = ev.pageX - x;//获得X轴方向移动的值
var _y = ev.pageY - y;//获得Y轴方向移动的值
_this.css({'left':_x+"px",'top':_y+"px"});
});
});
$(document).mouseup(function(){
$(this).unbind("mousemove");
_this.css({'opacity':'','border':'solid 1px #09f'});
})
};
})(jQuery);
</script>
</head>
<body>
<input type="button" value=" 弹出窗口 " id="button" />
</body>
</html>

数据包下载:百度网盘本地下载

*web鱼承诺:本站所有资源代码免费下载,无病毒,无弹窗,无干扰链接,全都经过测试才发布的!给我建议

分享到:
标签:Jquery弹窗,弹出层,弹窗,弹窗插件,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^

Jquery弹出层带确认框取消及拖动效果:目前有2 条留言

  1. 抢个沙发,虽然很想用,但是还是不会,看不懂代码~~

    2013-08-12 下午 7:38
    • 慢慢来,看得多用得多自然就懂了

      2013-08-14 下午 2:06