`
chengyu2099
  • 浏览: 459523 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery 弹出层

jQueryJava 
阅读更多 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
	<head>
		<title>Dialog Demo</title>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
		<link rel="stylesheet" href="../css/flora.all.css" type="text/css"
			media="screen" title="Flora (Default)" />
		<link rel="stylesheet" href="../css/style.css" type="text/css" />

		<script type="text/javascript" src="../js/jquery-latest.pack.js"></script>
		<script type="text/javascript" src="../js/jquery.dimensions.js"></script>
		<script type="text/javascript" src="../js/ui.dialog.js"></script>
		<script type="text/javascript" src="../js/ui.mouse.js"></script>
		<script type="text/javascript" src="../js/ui.resizable.js"></script>
		<script type="text/javascript" src="../js/ui.draggable.js"></script>
		<style type="text/css">
		.hover {
			background: #000;
		}
		
		//
		#example1,#example2,#example3 {
			display: none;
		}
		</style>
		<script type="text/javascript">
  		$(function()
  		{
  			
  		});
  	</script>
	</head>

	<body>

		<h2>
			1. 默认
		</h2>
		<div class="playground">
			<div id="example1">
				Hello, World!
			</div>
			<br />
			<button onclick="$('#example1').dialog();$(this).hide().next().show();">
				创建一个 Dialog
			</button>
			<button onclick="$('#example1').dialogOpen()" style="display:none;">
				打开
			</button>
			<button onclick="$('#example1').dialogClose()">
				关闭
			</button>
		</div>

		<h2>
			2. 加options: Title, Width &amp; Height
		</h2>
		<div class="playground">
			<div id="example2" title="dialog title">
				I have a title and I'm big
			</div>
			<br />
			<button
				onclick="$('#example2').dialog({width: 600, height: 300});$(this).hide().next().show();">
				创建一个 Dialog
			</button>
			<button onclick="$('#example2').dialogOpen()" style="display: none;">
				打开
			</button>
			<button onclick="$('#example2').dialogClose()">
				关闭
			</button>
		</div>

		<h2>
			3. 按钮: yes or no.
		</h2>
		<div class="playground">
			<div id="example3">
				Please select yes or no。
			</div>
			<br />
			<button
				onclick="$('#example3').dialog({
		title: 'Are you sure?',
		buttons: {
			'Yes': function() { $(this).parents('.ui-dialog:first').dialogClose(); alert('You clicked \'Yes\''); },
			'No': function() { $(this).parents('.ui-dialog:first').dialogClose(); alert('You clicked \'No\''); }
		}
	});$(this).hide().next().show();">
				创建一个 Dialog
			</button>
			<button onclick="$('#example3').dialogOpen()" style="display: none;">
				打开
			</button>
			<button onclick="$('#example3').dialogClose()">
				关闭
			</button>
		</div>

	
	</body>
</html>
分享到：
| jquery 鼠标移动，连接提示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics