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/

  • 相关阅读:
    一个maven问题
    zz 聊聊并发(七)——Java中的阻塞队列
    聊聊并发(六)
    jvm 内存参数
    zz 聊聊并发(五)
    zz 聊聊并发(四)
    zz 聊聊并发(三)
    zz 聊聊并发(二)
    zz 聊聊并发(一)
    JQuery中$.ajax()方法参数详解
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2754771.html
Copyright © 2011-2022 走看看