jQuery遮罩插件jQuery.blockUI.js简介利用Jquery.blockui.js创建可拖动、自定义内容的弹出层

利用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脚本

按钮：

脚本：

 

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