js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 窗口特效

jQuery点击弹出对话框窗口确认特效代码

发布时间:2016-01-26 11:18:29    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery点击弹出对话框窗口确认特效代码
<!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" />    
		<title>jQuery点击弹出对话框窗口确认特效代码</title>    
		<meta name="keywords" content="弹窗,对话框" />    
		<link rel="stylesheet" type="text/css" href="css/alert.css" />    
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>    
		<script type="text/javascript">    
			$(document).ready(function($){    
				$(".btn1").click(function(event){    
					$(".hint").css({"display":"block"});    
					$(".box").css({"display":"block"});    
				});    
				$(".hint-in3").click(function(event) {    
					$(".hint").css({"display":"none"});    
					$(".box").css({"display":"none"});    
				});    
				$(".btn2").click(function(event) {    
					$(".hintl").css({"display":"block"});    
					$(".box").css({"display":"block"});    
				});    
				$(".hint3").click(function(event) {    
					$(this).parent().parent().css({"display":"none"});    
					$(".box").css({"display":"none"});    
				});    
				$(".hintl-in3").click(function(event) {    
					$(".hintl").css({"display":"none"});    
					$(".box").css({"display":"none"});    
				});    
				$(".hintl-in4").click(function() {    
					$(".hintl").css({"display":"none"});    
					$(".box").css({"display":"none"});    
				});				
    
			});    
		</script>    
	</head>    
	<body>    
		<div class="box"></div>    
		<button class="btn1">成功</button>    
		<button class="btn2">失败</button>    
		<div class="hint">    
			<div class="hint-in1">    
				<div class="hint1"></div>    
				<div class="hint2">恭喜!充值成功</div>    
				<div class="hint3"></div>    
			</div>    
			<div class="hint-in2">你可以去首页查看账户余额。</div>    
			<div class="hint-in3">确定</div>    
		</div>    
		<div class="hintl">    
			<div class="hintl-in1">    
				<div class="hintl1"></div>    
				<div class="hintl2">抱歉!充值失败</div>    
				<div class="hint3"></div>    
			</div>    
			<div class="hintl-in2">请查看您的网络是否正常。</div>    
			<div class="hintl-in3">确定</div>    
			<div class="hintl-in4">返回</div>    
		</div>    
	</body>    
</html>



对话框

jquery图片相册特效,切换上下页,还带对话框提醒特效

jQuery DsDialog 一款超全功能的漂亮对话框插件

css3对话框插件来制作动画弹出表单特效

jQuery点击弹出对话框窗口确认特效代码