使用jQuery的easydrag插件实现可拖动的DIV弹出框

EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。

在没遇到easydrag插件之前，想实现一个弹出框并不是一件轻而易举的事情！

人们常说没有不劳而获的事情，但在编码的世界中却不是这样。更多的开源框架方面了我们，也毒害了我们！

废话少说，先看效果：

全部代码：

<!DOCTYPE HTML>
<html>
<head>
<title>easydrag实现可拖动的DIV弹出框</title>
<style>
/* 重置浏览器默认样式 */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; }
table{border-collapse:collapse;border-spacing:0;}
a{ color:#333; text-decoration:none;}
a:hover{ text-decoration:none;}
.wrap{ width:960px; margin:20px auto;}
.box{ display:none; background:#fff; border:1px solid #ccc; position:absolute;}
#popbox{ width:550px;height:320px;overflow:hidden;}
#handler{ width:98%; height:30px; line-height:30px; overflow:hidden; color:#fff; border-bottom:1px solid #ccc; background:#ccc; padding-left:2%; float:left;}
.btn{ display:block; width:90px; height:28px; border:1px solid #ccc; line-height:28px; text-align:center; margin-right:20px; float:left; display:inline; margin-right:15px; cursor:pointer;}
.close{ display:block; background:url(images/close.gif) no-repeat; width:13px; height:13px; float:right; text-indent:-999em; cursor:pointer; display:inline; margin:8px 12px 0 0;}
.head i{ float:left; font-style:normal;}
.content{ width:100%; float:left;}
.content img{width:100%;}
</style>
<!-- 使用百度的jquery在线cdn -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- easydrag.js没有找到在线的cdn，大家可以自行下载 -->
<script type="text/javascript" src="js/easydrag.js"></script>
<script language="javascript">
$(function(){
//btn绑定click事件
$('.btn').click(function(){
//设置弹出框居中
$('#popbox').css({
left: ($(window).width() - $('#popbox').outerWidth())/2,
top: ($(window).height() - $('#popbox').outerHeight())/2 + $(document).scrollTop()
});
$('#popbox').easydrag();
//淡入已隐藏的div
$('#popbox').fadeIn();
$('#popbox').setHandler('handler');
$('.close').click(function(){
//淡出效果来隐藏弹出的div
$('#popbox').fadeOut();
});
});
});
</script>
</head>
<body>
<div class="wrap">
<b class="btn">打开弹出框</b>
<div id="popbox" class="box">
<div class="head" id="handler"><b class="close">关闭</b><i>点击标题位置进行拖动</i></div>
<div class="content"><a href="http://blog.csdn.net/xmtblog/"><img src="images/img03.jpg" /></a></div>
</div>
</div>
</body>
</html>

以上内容是小编给大家介绍的使用jQuery的easydrag插件实现可拖动的DIV弹出框，希望对大家有所帮助！

赞 (0)

相关推荐

  • jQuery动态添加可拖动元素完整实例(附demo源码下载)

    jQuery动态添加可拖动元素完整实例(附demo源码下载)

    本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&

  • jQuery实现移动端滑块拖动选择数字效果

    jQuery实现移动端滑块拖动选择数字效果

    本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 运行效果图: 实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>demo</title> <link rel="stylesheet"

  • jQuery实现div随意拖动的实例代码(通用代码)

    注意js放的位置,要放的靠近,若被其他覆盖,则无法移动. 比如: <div id="move">可移动的DIV</div> 引入jquery.js, jquery-ui.js, <script scr="http://code.jquery.com/jquery-1.10.2.js"></script> <script scr="http://code.jquery.com/ui/1.11.4/jque

  • jQuery实现拖动效果的实例代码

    jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">

  • jQuery拖动元素并对元素进行重新排序

    jQuery拖动元素并对元素进行重新排序

    本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下 效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check

  • jquery拖动层效果插件用法实例分析(附demo源码)

    本文实例讲述了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" dir="l

  • jQuery实现简单的DIV拖动效果

    本文实例讲述了jQuery实现简单的DIV拖动效果.分享给大家供大家参考,具体如下: 创建一个HTML文件,复制以下代码进去,修改jquery文件(没有的到网上去下一个,我使用的是jquery-1.8.2),即可以运行了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • 使用jQuery的easydrag插件实现可拖动的DIV弹出框

    使用jQuery的easydrag插件实现可拖动的DIV弹出框

    EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件. 在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情! 人们常说没有不劳而获的事情,但在编码的世界中却不是这样.更多的开源框架方面了我们,也毒害了我们! 废话少说,先看效果: 全部代码: <!DOCTYPE HTML> <html> <head> <title>easydrag实现可拖动的DIV弹出框</title> <style> /* 重置

  • JQuery实现页面弹出框

    JQuery实现页面弹出框

    本文实例为大家分享了JQuery实现页面弹出框的具体代码,供大家参考,具体内容如下 bootstrap4里面有个模态框,点击页面中的某个按钮或者元素就会弹出一个框框: 今天尝试用JQ来实现一下,具体的思路就是: 1.在页面中创建一个div2.用JQ中的hide()和show()来控制上面的div的隐藏和显示 第一步:创建按钮,div,样式 <head>     <meta charset="UTF-8">     <title>页面弹出框</t

  • jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

    jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

    功能:zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog,该插件对背景进行遮罩,然后弹出信息显示框,信息显示种类包括: 一.信息种类说明: 1.1.操作成功信息 1.2.错误信息 1.3.警告信息 1.4.通知信息 二.使用说明 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4

  • jQuery仿IOS弹出框插件

    jQuery仿IOS弹出框插件

    这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件,包括Alert弹出框和Confirm确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方法,一看就懂: 首先导入jquery库和插件库以及css文件 <script src="./jquery-1.8.3.min.js"></script> <script src="./jquery.confirm-1.1.js">&l

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • 基于jQuery的弹出框插件

    html如下: 复制代码 代码如下: <!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-e

  • js弹出框轻量级插件jquery.boxy使用介绍

    当你需要使用弹出框时,当然可以使用jquery-ui,artdiag,blockUI等等,但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来,而且兼容性还不错! 复制代码 代码如下: <script type='text/javascript'> $(function() { $('#ask-actuator').click(function() { Boxy.ask("How are you feeling?", ["Great&q

  • Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面. 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 如果您想要单独引用该插件的功能,那么您需要引用 popov

  • 使用jquery制作弹出框效果

    非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有: alert:普通提示(警告)对话框 confirm:询问(确认)对话框 message:简单消息对话框(无title.无按钮) iframe:在对话框中嵌入一个iframe tip:带有小三角指向的小tip dialog:最基础的自定义对话框 var jDialogId = []; (function ($) { $.jDialog = function (o

  • 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)

    这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 效果演示    源码下载 html代码: <div class="container"> <h1>jQuery gDialog Plugin Exampels</h1> <button class="btn demo-1">Alert Dialog Box<

随机推荐