jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html
实现效果图:
分布实现
一、页面Html标签元素定义
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面加载时弹出一个对话框</title>
<body>
<div class="btn">
<a href="#" >点击使用360安全卫士</a>
</div>
<br>
<div class="box">
<h1><span><a>关闭</a></span>360安全卫士</h1>
<p>
<span class="info">欢迎使用360安全卫士[苏若年提醒您]</span>
<img src="images/tbinfo.png"/>
</p>
</div>
</body>
</html
二、定义页面样式,完成模块布局
<style type="text/css"> *{ padding: 0;margin: 0; } /*定义页面整体样式*/ body{ font-size: 12px;padding: 100px; font-family: "微软雅黑"，normal;} /*定义触发按钮样式*/ .btn a{ text-decoration: none; display: block; color: #DEF1DA; background-color: #47A85B; width: 160px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #87CE7A; } .btn a:hover{ font-weight: 800; box-shadow: 1px 2px #47A85B; background-color: #59BA46; } /*定义弹出窗体的样式*/ .box{ width: 580px; height: 260px; border: 1px solid #000; display: none; } /*--弹窗窗体标题栏--*/ .box h1{ height: :30px; line-height: 30px; font-size: 14px; background-color: #59BA46; padding-left: 10px; color: #DEF1DA; } /*--弹窗窗体关闭标签--*/ .box span a{ float: right; cursor: pointer; background-color: #59BA46; width: 45px; text-align: center; margin-right: 10px; color: #DEF1DA; display: block; } .box span a:hover{ background-color: #87CE7A; } /*--弹窗窗体内容面板--*/ .box p{ padding: 30px; } .box p .info{ color: #707070; padding: 9px; } </style>
三、引入jquery插件与jquery.easydrag插件,事先事件触发
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easydrag.handler.beta2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
//点击按钮标签,显示层
$(".box").show();
});
$("span").click(function(){
//点击关闭span,隐藏层
$(".box").hide();
});
//使用jquer.easydrag插件
$(".box").easydrag();
});
</script>
这样我们单击按钮就会弹出提示框,该提示框可以鼠标触控在页面中拖动.点击关闭按钮可以隐藏弹出框.
实例完整代码
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>页面加载时弹出一个对话框</title> <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.easydrag.handler.beta2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn").click(function(){ //点击按钮标签,显示层 $(".box").show(); }); $("span").click(function(){ //点击关闭span,隐藏层 $(".box").hide(); }); //使用jquer.easydrag插件 $(".box").easydrag(); }); </script> <style type="text/css"> *{ padding: 0;margin: 0; } /*定义页面整体样式*/ body{ font-size: 12px;padding: 100px; font-family: "微软雅黑"，normal;} /*定义触发按钮样式*/ .btn a{ text-decoration: none; display: block; color: #DEF1DA; background-color: #47A85B; width: 160px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #87CE7A; } .btn a:hover{ font-weight: 800; box-shadow: 1px 2px #47A85B; background-color: #59BA46; } /*定义弹出窗体的样式*/ .box{ width: 580px; height: 260px; border: 1px solid #000; display: none; } /*--弹窗窗体标题栏--*/ .box h1{ height: :30px; line-height: 30px; font-size: 14px; background-color: #59BA46; padding-left: 10px; color: #DEF1DA; } /*--弹窗窗体关闭标签--*/ .box span a{ float: right; cursor: pointer; background-color: #59BA46; width: 45px; text-align: center; margin-right: 10px; color: #DEF1DA; display: block; } .box span a:hover{ background-color: #87CE7A; } /*--弹窗窗体内容面板--*/ .box p{ padding: 30px; } .box p .info{ color: #707070; padding: 9px; } </style> </head> <body> <div class="btn"> <a href="#" >点击使用360安全卫士</a> </div> <br> <div class="box"> <h1><span><a>关闭</a></span>360安全卫士</h1> <p> <span class="info">欢迎使用360安全卫士[苏若年提醒您]</span> <img src="images/tbinfo.png"/> </p> </div> </body> </html>