这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
kissy实战之overlay(弹窗)使用示例
2013年07月16日 JavaScript ⁄ 共 1891字 等你评论

Overlay

悬浮的对话框
  1. KISSY.use('overlay',function(S,Overlay){  
  2.     // use Overlay  
  3. });  

Class

Class Detail

Overlay
Overlay (config)
xclass: ‘overlay’
继承自

Controller

Align ,

Position ,

包含其全部配置,属性,方法,事件.

Parameters: config (Object) – 配置项, 详细见下方 Configs Detail .

注意:使用前请加上初始样式

  1. <style> .ks-overlay{position:absolute;left:-9999px;top:-9999px;}  
  2. .ks-overlay-hidden{visibility:hidden;}  
  3. .ks-overlay-mask-hidden{display:none;}  
  4. .ks-overlay-shown{visibility:visible;}  
  5. .ks-overlay-mask-shown{display:block;}  
  6. </style>  

 

Configs Detail

effect
{Object} - 可选, 显示或隐藏时的特效支持, 对象包含以下配置:

target
{String|KISSY.Node} - 可选,动画的参考元素.

effect
{String} - 可选. 可取值 ‘fade’(渐隐显示), ‘slide’(滑动显示).

easing
{String} - 可选, 同 KISSY.Anim 的 easing 参数配置.

duration
{Number} - 可选, 动画持续时间, 以秒为单位.

例如:

  1. {  
  2.     target:'',        // {String|KISSY.Node} - 可选,动画的参考元素  
  3.     effect:'none',    // {String} - 可选, 默认为'none', 'none'(无特效), 'fade'(渐隐显示), 'slide'(滑动显示).  
  4.     easing:'',        // {String} - 可选, 同 KISSY.Anim 的 easing 参数配置.  
  5.     duration:3        // {Number} - 可选, 动画持续时间, 以秒为单位.  
  6. }  

 

closable
{Boolean} - 对话框右上角是否包括关闭按钮

closeAction
{String} - 点击关闭按钮的动作。默认 “hide” 隐藏,也可设置 “destroy” 销毁该组件.

mask
{Boolean|Object} - 组件显示时是否使用遮罩层盖住页面其他元素

closeOnClick
{Boolean} - 可选. 点击遮罩层是否关闭 overlay. (具体隐藏或销毁依赖 closeAction)

effect
{String} - 可选. 遮罩层显示隐藏效果. (取值 ‘fade’,’slide’)

duration
{Number} - 可选. 效果持续时间. 单位秒

Attributes Detail

closable
{Boolean} - 设置后显示或隐藏关闭按钮.

maskNode
{KISSY.Node} - 遮罩层节点.

Methods Detail

loading
loading ()
生成一个加载盖住当前组件内容
unloading

友荐云推荐
×