【jquery】blockUI 弹出层

最新推荐文章于 2019-06-22 12:00:17 发布

dengrongshou5105

最新推荐文章于 2019-06-22 12:00:17 发布

阅读量118

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2754771.html

版权

首先先附上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     <title>blockUI（弹出层）</title>
     <style type="text/css">
     #demo {
         width:100px;
         height:24px;
         text-align:center;
     }
     #displayBox{
         display:none;
     }
     </style>
 </head>
 <body>
     <button id="demo">点击弹出</button>
     <div id="displayBox">
         这里是弹出层显示的内容！！！<br /><br /><br /><a href="javascript:void(0);" onclick="$.unblockUI();return false;" title="点击关闭">点击关闭</a>
     </div>
 </body>
 </html>
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.blockUI.js"></script>
 <script type="text/javascript">
 $(function(){
     $('#demo').click(function(){
         $.blockUI({
             message: $('#displayBox'),
             css: {
                 width: '500px',
                 height: '100px',
                 backgroundColor: '#eee',
                 border: '1px solid red',
                 color: 'green',
                 textAlign: 'center',
                 cursor: 'default'
             }
         });
     });
 })
 </script>

参数说明：

message = 需要弹出的内容

css = 弹出内容的样式，其中属性需要写成 js 的形式，如 background-color => backgroundColor

$.unblockUI() = 关闭弹层

js 下载地址：http://files.cnblogs.com/yjzhu/jquery.blockUI.js

最后附上官网地址：http://www.malsup.com/jquery/block/

转载于:https://www.cnblogs.com/yjzhu/archive/2012/11/05/2754771.html

dengrongshou5105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jquery】blockUI 弹出层

首先先附上代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">...
复制链接

扫一扫