zoukankan html css js c++ java

【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">
 <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: {
                  '500px',
                 height: '100px',
                 backgroundColor: '#eee',
                 border: '1px solid red',
                 color: 'green',
                 textAlign: 'center',
                 cursor: 'default'
             }
         });
     });
 })
 </script>

参数说明：

message = 需要弹出的内容

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

$.unblockUI() = 关闭弹层

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

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

查看全文

相关阅读:
团队冲刺第四天
 团队冲刺第三天
 团队冲刺第二天
 冲刺（六）
冲刺（五）
冲刺（四）
冲刺（三）
冲刺（二）
冲刺（一）
第一阶段SCRUM

原文地址：https://www.cnblogs.com/yjzhu/p/2754771.html