点击按钮弹出小窗口_小窗口可拖拽
<!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>right</title>
<style>
*{ margin:0; padding:0;}
.place{background:#f0f9fd center repeat; height:40px;}
.place span{ font-weight:bold; font-family:'微软雅黑'; font-size:12px; line-height:40px; float:left; padding-left:10px; padding-right:10px;}
.place li{float:left; list-style:none; font-size:12px; font-family:'微软雅黑';}
.place a { line-height:40px; text-decoration:none; color:#000;}
.place a:hover{color:#C60;}
.button_wrap button{ float:left; width:70PX; height:35px; padding:5px; margin-top:10px;}
/*弹出框*/
.tip{width:485px; height:260px; position:absolute;top:10%; left:30%;background:#fcfdfd;box-shadow:1px 8px 10px 1px #9b9b9b;border-radius:1px;behavior:url(js/pie.htc); display:block; z-index:111111;}
.tip_title{ background:#09F center repeat-x; height:30px;}
.tip_title span { color:#FFF; line-height:30px; padding-left:15px; font-size:12px; float:left;}
.tip_title a { float:right; width:20px; height:20px; color:#FFF; display:block; cursor:pointer;}
.tip_title a:hover{ color:#000; cursor:pointer;}
.tip_info{width:308px;height:85px; margin:25px auto;}
.tip_info span img{ float:left;}
.tip_info p { font-size:12px; color:#000; font-weight:bold; line-height:26px; padding-top:15px;}
.tip_button{ width:150px; margin:auto; }
.tip_button button{ width:50px; height:30px; margin-left:10px; cursor:pointer;}
</style>
<!--juqery.js需要自己下载哦-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add").click(function(){
$(".tip").fadeIn(200);
});
$(".tip_title a").click(function(){
$(".tip").fadeOut(200);
});
$(".sure").click(function(){
$(".tip").fadeOut(100);
});
$(".cancel").click(function(){
$(".tip").fadeOut(100);
});
});
</script>
<!--插件需要自己下载哦-->
<script type="text/javascript" src="js/jquery.easydrag.handler.beta2.js"></script>
<script>
$(document).ready(function(){
$(".tip").easydrag();
});
</script>
</head>
<body>
<div class="place">
<span>位置:</span>
<ul>
<li><a href="#">首页></a></li>
<li><a href="#">数据表></a></li>
<li><a href="#">基本内容></a></li>
</ul>
</div>
<div class="right_info">
<div class="button_wrap">
<button type="text" value="添加" name="add" class="add">添加</button>
<button type="text" value="修改" name="xg">修改</button>
<button type="text" value="删除" name="delete">删除</button>
<button type="text" value="统计" name="tj">统计</button>
</div>
<!--弹出框-->
<div class="tip" style=" display:none;">
<div class="tip_title"><span>提示信息</span><a>x</a></div>
<div class="tip_info">
<span><img src="images/ticon.png" width="95" height="95" /></span>
<p>是否确认对信息的修改 ？<br/>
如果是请点击确定按钮 ，否则请点取消。</p>
</div>
<div class="tip_button">
<button type="text" value="确定" name="sure" class="sure">确定</button>
<button type="text" value="取消" name="cancel" class="cancel">取消</button>
</div>
</div>
</div>
</div>
</body>
</html>
