jQuery仿照新浪微博提示框（确认框）

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!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" dir="ltr" lang="zh-CN">
<head>
	<title>jQuery仿照新浪微博提示框（确认框）插件最新修正版_jQuery-smoothConfirm </title>
	<link href="smoothConfirm.<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>" media="screen" rel="stylesheet" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<script src="jquery.smoothConfirm.js" type="text/javascript"></script>
</head>
<body>
	<h1><strong>jQuery仿照新浪微博提示框插件最新修正版</strong></h1>
	<p>
		<a href="javascipt:void(0)" id="demo1">点击查看效果：默认样式</a>
		<span id="clickMeResult"></span>
	</p>

<p>
		<a href="javascipt:void(0)" id="demo2">点击查看效果：下方滑出</a>
	</p>

<p>
		<a href="javascipt:void(0)" id="demo3">点击查看效果：设置速度</a>
	</p>
	<p>
		<a href="javascipt:void(0)" id="demo4">点击查看效果：设定按钮名称</a>
	</p>
	<p>
		<a href="javascipt:void(0)" id="demo5">点击查看效果：一般提示窗口</a>
	</p>
	<p>
		<a href="javascipt:void(0)" id="demo6">点击查看效果：调整窗口大小</a>
	</p>
	<script type="text/javascript">
	(function() {
		$("#demo1").click(function(){
			//调用smoothConfirm 插件
			$(this).smoothConfirm("这是一个确认窗口", {
				//点击确认返回callback
				ok: function() {
					$("#clickMeResult").html("你点击了确定!");
				},
				//点击取消返回callback
				cancel: function() {
					$("#clickMeResult").html("你点击了取消!");	
				}
			});
			return false;
		});
		$("#demo2").click(function(){
			//调用smoothConfirm 插件
			$(this).smoothConfirm("这是个窗口在下方", {
				direction:'bottom'
			});

return false;
		});
		$("#demo3").click(function(){
			//调用smoothConfirm 插件
			$(this).smoothConfirm("这是个窗口调整了速度", {
				speed: 1000
			});

return false;
		});
		$("#demo4").click(function(){
			//调用smoothConfirm 插件
			$(this).smoothConfirm("今天天气怎么样？", {
				okVal: "很好",
				cancelVal: "一般"
			});

return false;
		});
		$("#demo5").click(function(){
			//调用smoothConfirm 插件
			$(this).smoothConfirm("这就是今天的Demo", {
				okVal: "知道了",
				cancelVal: null
			});

return false;
		});
		$("#demo6").click(function(){
			//调用smoothConfirm 插件
			$(this).smoothConfirm("<h1>我变大了<br/>大了!!!!!</h1>", {
				okVal: "知道了",
				cancelVal: null,
				width: 190,
				height: 130
			});
			return false;
		});
	})(jQuery);
	</script>
		</body></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

jQuery仿照新浪微博提示框（确认框）

相关文章

精彩推荐