jQuery拉到底部弹出对话框

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery拉到底部弹出对话框的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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=gb2312" />
<title>jQuery�����ײ������Ի���</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link type="text/css" rel="stylesheet" media="all" href="http://fonts.googleapis.com/css?family=Abel:400|Oswald:300,400,700">
<link href="css/bubbleScroll.css" rel="stylesheet" type="text/css" />

<!-- DEMO -->
<link href='http://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<!-- DEMO -->

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.bubbleScroll.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

	var bgColor 		= "#FFF";
	var borderColor 	= "#000";
	var textColor 		= "#000";
	var bubbleStyle 	= "circle";
	var position 		= "right";
	var alwaysVisible	= false;
	var useCookie		= false;
	
	$(".bubbleScroll").bubbleScroll();
	
	// BubbleScroll Options
	// -- Always Visible
	$(".update").click( function(){
		if( $(".alwaysVisible").is(':checked') ) 
		{ 
			alwaysVisible = true;
		} else { 
			alwaysVisible = false;
		}
		
		if( $(".useCookie").is(':checked') ) 
		{ 
			useCookie = true;
		} else { 
			useCookie = false;
		}
				
		bgColor = $(".backgroundColor").val();
		borderColor = $(".borderColor").val();
		textColor = $(".textColor").val();
		bubbleStyle = $(".bubbleStyle").val();
		position = $(".position").val();
		
		if(useCookie)
		{
			if (confirm("You have checked the cookie option. When you will close the bubble and if you refresh the page, you will not see it anymore until you erase your cookies ;-) .")) {
				$(".bubbleScroll").remove();
				$("body").append("<div class='bubbleScroll'><div class='bubbleScroll_inner'><a href='#' class='bubbleScroll_close_button'>x</a><h2>BubbleScroll</h2><p><img style=\"border-radius:8px\" src=\"img/codecanyon.jpg\" alt=\"codecanyon\" width=\"150\" /><br />Buy this Script on <b>CodeCanyon</b></p></div></div>");
				// BubbleScroll
				$(".bubbleScroll").bubbleScroll({
					borderColor: borderColor,
					backgroundColor: bgColor,
					textColor: textColor,
					bubbleStyle: bubbleStyle,
					position: position,
					alwaysVisible: alwaysVisible,
					useCookie: useCookie
				});
			}
		} else {
			$(".bubbleScroll").remove();
			$("body").append("<div class='bubbleScroll'><div class='bubbleScroll_inner'><a href='#' class='bubbleScroll_close_button'>x</a><h2>BubbleScroll</h2><p><img style=\"border-radius:8px\" src=\"img/codecanyon.jpg\" alt=\"codecanyon\" width=\"150\" /><br />Buy this Script on <b>CodeCanyon</b></p></div></div>");
			// BubbleScroll
			$(".bubbleScroll").bubbleScroll({
				borderColor: borderColor,
				backgroundColor: bgColor,
				textColor: textColor,
				bubbleStyle: bubbleStyle,
				position: position,
				alwaysVisible: alwaysVisible,
				useCookie: useCookie
			});
		}
	});

	// BubbleScroll
	$(".bubbleScroll").bubbleScroll({
		borderColor: borderColor,
		backgroundColor: bgColor,
		textColor: textColor,
		bubbleStyle: bubbleStyle,
		position: position,
		alwaysVisible: alwaysVisible,
		useCookie: useCookie
	});

	

});
</script>
</head>
<body>
	<div class="title">
		<h1>BubbleScroll - v1.0</h1>
		<div class="script_option">
			<h4>Script Option</h4>
			<label>Always Visible : <input class="alwaysVisible" type="checkbox" /></label>
			<label>Use Cookie : <input class="useCookie" type="checkbox" /></label>
			<label>Style : <select class="bubbleStyle"><option class="bubbleStyle" selected="selected" value="circle">Circle</option><option value="square">Square</option></select></label>
			<label>Position : <select class="position" ><option selected="selected" value="right">Right</option><option value="left">Left</option></select></label>
			<label>Border Color : <input value="#000" type="text" class="borderColor" /></label>
			<label>Background Color : <input value="#FFF" type="text" class="backgroundColor" /></label>
			<label>Text Color : <input value="#000" type="text" class="textColor" /></label>
			<br /><br />
			<input type="button" value="Update!" class="update" />
		</div>
	</div>
	<hr />
	<h3>���¹���</h3>
	<p style="text-align:center;">
		<img src="img/arrow-down-outline-128.png" alt="Arrow Down" />
	</p>
	<div class='bubbleScroll'>
	<div class='bubbleScroll_inner'>
	<a href='#' class='bubbleScroll_close_button'>x</a>
	<h2>BubbleScroll</h2>
	</div>
	</div>
</body>
</html>

CSS代码(demo.css):

body{margin:0;padding:0;font-family:Abel,Arial,Helvetica,sans-serif;height:1500px;background:#EBEBEB;}
.title{background:white;margin:0;padding:0;padding-top:20px;}
h1{text-align:center;font-family:'Loved by the King',cursive;font-size:80px;margin:0;}
h3{font-family:'Poiret One',cursive;text-align:center;font-size:60px;}
h4{font-size:30px;margin-top:0;margin-bottom:20px;}
hr{border:none;height:2px;background:#DADADA;margin:0;}
label{display:inline-block;padding-right:20px;padding-left:15px;text-indent:-15px;}
input,select{width:13px;height:20px;padding:0;margin:0;vertical-align:bottom;position:relative;top:-1px;*overflow:hidden;}
select{width:auto;}
input[type=text]{width:50px;}
input[type=button]{width:auto;}
.script_option{text-align:center;padding-bottom:20px;}

附件:下载该文件资源,减少时间成本(增值服务)