jQuery实现带遮罩层效果的块界面弹出层示例【附演示源码下载】

本文实例讲述了jQuery实现带遮罩层效果的块界面弹出层。分享给大家供大家参考，具体如下：

首先先附上代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML L1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' XML : lang=' EN ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8'/titleblockUI(弹出层)/title style type=' text/CSS ' # demo { width :100 px；高度：24px文本对齐：居中；} # display box { display : none }/style/head body按钮id='demo '点击弹出/button div id='displayBox '这里是弹出层显示的内容！br/br/br/a href=' JavaScript : void(0)；'onclick='$ .unblockUI()；返回假的标题='点击关闭'点击关闭/a /div /body /html脚本类型=' text/JAVAScript ' src=' http : jquery-1。7 .2 .量滴js /脚本脚本类型=' text/JAVAScript ' src=' http : jquery。blockui。js /脚本脚本类型=' text/JavaScript ' $(function(){ $(' # demo ')).单击(函数(){ $).blockUI({ message : $(' # display box ')、css: { width: '500px '、height: '100px '、backgroundColor: '#eee '、border: '1px纯红、颜色：’绿色、textalign :’居中、光标：’默认' });});})/脚本运行效果图如下：

参数说明如下：

消息=需要弹出的内容

css=弹出内容的样式，其中属性需要写成射流研究…的形式，如背景色=backgroundColor

$.unblockUI()=关闭弹层

完整实例代码点击此处本站下载。

再附上官网地址：http://www .马尔苏普。com/jquery/block/

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery窗口操作技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。