利用Jquery.blockui.js创建可拖动、自定义内容的弹出层

目标 :

1 . 弹出层的内容可以自定义任意的HTML元素 , 不仅仅只显示一行文本。

2 . 弹出层可以拖动 , 这样不会遮挡后面的内容。

效果见下图 :

需要文件 :

Jquery.js 1.6 以上版本

Jquery.blockUI.js  官网下载

支持拖动的四个JqueryUI文件 :

jquery.ui.core.js  ,jquery.ui.widget.js , jquery.ui.mouse.js , jquery.ui.draggable.js

官网下载

实现步骤 :

1 . 将以上六个 js文件按如下顺序引入到页面中 :

  1. Jquery.js
  2. jquery.ui.core.js
  3. jquery.ui.widget.js
  4. jquery.ui.mouse.js
  5. jquery.ui.draggable.js
  6. Jquery.blockUI.js

2 . 在页面增加一个按钮 , 及这个按钮对应的js脚本

按钮:

<input type="button" onclick="show();" value="block" />

脚本:

<script type="text/javascript">

function show() {

    //这里就是要弹出层的内容, 至于是文本还是HTML控件还是神马随便定义

var html = "<div style='background-color:#FBA164; height:30px;'>ssssss</div>" +

"<div style='background-color:#ffffff; padding:20px 30px 30px 30px;'>"+

"asdlke <br /> jpertp348af<br />asdlke <br /> jpertp348af<br />asdlke "+

"<br /> jpertp348af<br />asdlke <br /> jpertp348af<br /> <br /></div>";

//下面这三行照抄就可以了。注意页面中不要有id=dialog的元素,以免重名出现bug

$("body").append("<div id='dialog'></div>");

$("#dialog").html(html);

$.blockUI({ message: $("#dialog") });

}

</script>

3 . 至此已经实现弹出层可以加入任何内容了,接下来修改Jquery.blockUI.js文件以便支持拖放

找到 “lyr3 = $(s);” 这一行代码 , 在这行代码下一行加入 “lyr3.draggable();”

4 . 好了 , 接下来运行页面 , 点击一下“block”按钮 , 弹出 , 拖动 。。 。

http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/

http://www.360doc.com/content/13/0301/10/9200790_268593329.shtml

jQuery遮罩插件jQuery.blockUI.js简介的更多相关文章

  1. jQuery遮罩插件 jquery.blockUI.js

    Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...

  2. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

  3. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  4. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  5. Jquery遮罩插件,想罩哪就罩哪!

    一  前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能如下 1 可以全屏遮 用于提交数据时 2 ...

  6. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  7. jQuery国际化插件 jQuery.i18n.properties 【轻量级】

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...

  8. jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

    上一篇记录了BaiduTemplate模板引擎使用示例附源码,在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { ...

  9. jquery评分插件jquery.raty.js

    1.参考链接 官方地址. 教程一 教程二 2.案例1 引入文件: <!-- 评分插件 --> <script type="text/javascript" src ...

随机推荐

  1. JAVA编译异常处理:java.lang.OutOfMemoryError: PermGen space

    在Intellij开发工具中编译JAVA项目,出现以下错误: 六月 21, 2016 6:28:07 下午 org.apache.tomcat.util.modeler.BaseModelMBean ...

  2. (转)javaScript插件开发

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  3. Java 虚拟机体系结构

    众所周知,Java源代码被编译器编译成class文件.而并不是底层操作系统可以直接执行的二进制指令(比如Windows OS的.exe文件).因此,我们需要有一种平台可以解释class文件并运行它.而 ...

  4. CentOS 7快速搭建Nodejs开发环境

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好.学习Nodejs首先需要会安装环境.这里我介绍如 ...

  5. python中写shell(转)

    python中写shell,亲测可用,转自stackoverflow To run a bash script, copy from stackoverflow def run_script(scri ...

  6. HDU 4629 Burning 几何 + 扫描线

    总体思路参考了 这里. 细节:1.控制精度,虽然这题没卡精度,不过还是要控制一下. 之前 bool operator<( const Point& A, const Point& ...

  7. 用root直接登入ubuntu 14_04

    官网下载地址:http://www.ubuntu.com/download/desktop64位桌面版:http://www.ubuntu.com/ubuntu-releases/14.04/ubun ...

  8. python实现简单kNN

    注释写得很清楚了,熟悉了一下python的一些基本语法和numpy中的一些操作. from numpy import * import operator def createDataSet(): # ...

  9. 1430. Crime and Punishment(枚举)

    1430 即使是枚举 也是有一定技术含量的 对于ax+by = n: 枚举max(a,b)中的系数 这样可以确定另一个 但问题是如何确定上限 假设max(a,b) = a,很显然是不会超n/a的 但这 ...

  10. 在DirectX 中进行2D渲染

    http://flcstudio.blog.163.com/blog/static/756035392008115111123672/ 最近,我看到很多关于DirectX8在最新的API中摒弃Dire ...