KiMoGiGi 技术文集

不在乎选择什么,而在乎坚持多久……

IT博客 首页 联系 聚合 管理
  185 Posts :: 14 Stories :: 48 Comments :: 0 Trackbacks
PS:一个Jquery的插件,显示Modal窗口

官方网址:http://www.malsup.com/jquery/block/


使用参数:


Options

BlockUI's default options look (exactly) like this:
// override these in your code to change the default behavior and style 
$.blockUI.defaults = { 
    // message displayed when blocking (use null for no message) 
    message:  '<h1>Please wait...</h1>'
     
    // styles for the message when blocking; if you wish to disable 
    // these and use an external stylesheet then do this in your code: 
    // $.blockUI.defaults.css = {}; 
    css: {  
        padding:        0
        margin:         0
        width:          '30%',  
        top:            '40%',  
        left:           '35%',  
        textAlign:      'center',  
        color:          '#000',  
        border:         '3px solid #aaa'
        backgroundColor:'#fff'
        cursor:         'wait' 
    }, 
     
    // styles for the overlay 
    overlayCSS:  {  
        backgroundColor:'#000',  
        opacity:        '0.6'  
    }, 
     
    // z-index for the blocking overlay 
    baseZ: 1000
     
    // set these to true to have the message automatically centered 
    centerX: true// <-- only effects element blocking (page block controlled via css above) 
    centerY: true
     
    // allow body element to be stetched in ie6; this makes blocking look better 
    // on "short" pages.  disable if you wish to prevent changes to the body height 
    allowBodyStretch: true
     
    // be default blockUI will supress tab navigation from leaving blocking content; 
    constrainTabKey: true
     
    // fadeOut time in millis; set to 0 to disable fadeout on unblock 
    fadeOut:  400
     
    // suppresses the use of overlay styles on FF/Linux (due to significant performance issues with opacity) 
    applyPlatformOpacityRules: true 
}; 
Changing the blockUI options is simple and can be done in one of two ways:
  1. Globally, by directly overriding the values in the $.blockUI.defaults object
  2. Locally, by passing an options object to the blockUI (or block) function.

Global Overrides

You can change the default options by simply declaring different values for them. For example:
// change message border 
$.blockUI.defaults.css.border = '5px solid red'
 
// make fadeOut effect shorter 
$.blockUI.defaults.fadeOut = 200

Local Overrides

Local overrides are achieved by passing an object to the blockUI (or block) function. The exact same options are available to the local options object as are available in the global object. For example:
// change message border 
$.blockUI({ css: { border = '5px solid red'} }); 
 
... 
 
// make fadeOut effect shorter 
$.blockUI({ fadeOut: 200 }); 
 
... 
 
// use a different message 
$.blockUI({ message: 'Hold on!' }); 
posted on 2008-06-10 00:22 KiMoGiGi 阅读(1567) 评论(0)  编辑 收藏 引用 所属分类: JavaScript
只有注册用户登录后才能发表评论。