Jquery实现网页右下角弹窗

最新推荐文章于 2021-06-09 17:04:51 发布

Zerohuan

最新推荐文章于 2021-06-09 17:04:51 发布

阅读量2k

点赞数

文章标签： Javascript css 弹出窗口 Jquery

本文链接：https://blog.csdn.net/Zerohuan/article/details/8681473

版权

用Jquery的$.fn.extend()做了小弹窗插件，可惜还不能很好在IE6上工作。。。下面是demo的几个文件，IE6上的工作就交给ie6_tipWindow.js了，有些兼容性问题没弄好，哎，有附源文件~

· Jquery做的弹窗插件tipWindow.js

/*
*这是用JQuery编写的弹出窗口插件会自动将使用popUpWin的Html元素设置为弹出窗口，并放置到右下角
*调用popWindow函数将会使弹出窗口弹出
*popUpWin插件可以用popDown来选择隐藏的动画样式，目前只支持none(直接隐藏)和slip(滑动隐藏)两种样式
*/

$.fn.extend({
    ie6fixedbug: function ie6fixedbug () {
		var args = arguments;
        $(this).css("position", "absolute");
		
        var m = (window.screen.height - $(this).height()) / 2;

        var obj = $(this)[0];
		obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + args[0] + 'px';
        window.onscroll = function () {

            obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + args[0] + 'px';

        }

        window.onresize = function () {

            obj.style.top = (document.body.scrollTop || document.documentElement.scrollTop) + args[0] + 'px';

        }

    }
}); 

$.fn.extend({
	popUpWin : function() {
	var args = arguments; //保存传入的参数列表
	var $this = this;
		
	if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style) {
		$this.css({position : "absolute"});
	}	
	else {
		$this.css({position : "fixed"});
	}
	$this.css({display : "none", right : "5px"}); //设置弹窗的样式将对象置到右下角
	var $showBottom = 0;  //设置对象显示时的bottom值
	//保存对象的实际高度
	var $winHeight = $this.outerHeight();
	var $hiddenBottom = -$winHeight;  //设置对象隐藏时的bottom值
	if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style) {
		$(this).ie6fixedbug(10);
	} else {
		$this.css("bottom" , $hiddenBottom + "px");  //将对象隐藏到视口以外
	}
	//将对象第一个连接子元素设置为隐藏按钮并绑定click事件
	var $elem = this.find("a:first");
	$elem.click(function() {
		if(args[0]["popdown"] == "none")  //当popdown设置为none时
			$this.css("display" , "none");
		else if(args[0]["popdown"] == "slip") {  //当popdown设置为slip时
			$this.animate({bottom : ($hiddenBottom + "px")} , 450);
		}
	});	
	
},
	
	//调用popWindow使弹窗弹出
	popWindow : function() {
		var $this = this;
		var $id =  $this.attr("id") ? "#" + $this.attr("id") : "." + $this.attr("class");
		var $ii = $this.attr("id");
		$this.css("display" , "block");
		if($.browser.msie)
			$this.animate({bottom : -1}, 450);
		else 
			$this.animate({bottom : 0}, 450);
	}
});

IE6上就靠它了：ie6_tipWindow.js

$.fn.extend({
	popUpWinIE : function() {
		var obj = $(this)[0];
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
  try{
  divTop = parseInt(obj.style.top,10)
  divLeft = parseInt(obj.style.left,10)
  divHeight = parseInt(obj.offsetHeight,10)
  divWidth = parseInt(obj.offsetWidth,10)
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  obj.style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
  obj.style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
  obj.style.visibility="visible"
  objTimer = window.setInterval("moveDiv()",10)
  }
  catch(e){}
}

function resizeDiv()
{
  i+=1
  if(i>500) closeDiv()
  try{
  divHeight = parseInt(obj.offsetHeight,10)
  divWidth = parseInt(obj.offsetWidth,10)
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  obj.style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
  obj.style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
  }
  catch(e){}
}

function moveDiv()
{
  try
  {
  if(parseInt(obj.style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
  {
  window.clearInterval(objTimer)
  objTimer = window.setInterval("resizeDiv()",1)
  }
  divTop = parseInt(obj.style.top,10)
  obj.style.top = divTop - 1
  }
  catch(e){}
}
function closeDiv()
{
  obj.style.visibility='hidden';
  if(objTimer) window.clearInterval(objTimer)
}
	}
});

网页文件win.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="reset.css" />  <!--重置浏览器样式-->
<!--[if IE 6]>
<style type="text/css">
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
</style>
<![endif]-->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="tipWindow.js"></script>
<style type="text/css">
#tipWin {
	background: url(images/bg_pop_window.png) left top no-repeat;
	width: 279px;
	height: 186px;
	position: fixed;
}

#hiddenButton, #hiddenButton:link {
	border: none;
	border-width: 0; 	/*IE 6 BUG*/
	border-style: none; /*IE 6 BUG*/
	display: block;
	margin: -18px 15px 0px 245px;
	padding: 2px 2px 2px 2px;
	background: url(images/hiddenButton.png) left top no-repeat;
}

#hiddenButton img {
	border: none;
	border-width: 0; 	/*IE 6 BUG*/
	border-style: none; /*IE 6 BUG*/
}

.popWinTitle {
	display: block;
	margin: 5px 0 0 5px;
	font: 0.9em "幼圆";
	color: #666;
}
</style>
<script type="text/javascript">
$(function(){
	$('#tipWin').popUpWin({
		"popdown" : "none"
	});
	
	$('#tipWin').popWindow();
	$('#try').ie6fixedbug(100);
});
</script>
<title>无标题文档</title>
</head>

<body>
<div id="try">123</div>
<div style="height: 1000px; width: 100px;"></div>
<div id="tipWin">
<span class="popWinTitle">消息提示</span>
<a id="hiddenButton" href="javascript:;"><img src="images/hiddenButton.png" /></a>
</div>
</body>
</html>

重置样式的CSS：reset.css

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0px; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }
*{padding: 0; margin: 0;};