web弹层组件

所属分类:UI-弹出层

 44946  353  查看评论 (5)
分享到微信朋友圈
X
web弹层组件 ie兼容6

使用方法:引入jquery1.8以上的版本,引入layer

可以使用已集成的方法,比如:

layer.alert("弹出层提示信息", 1,function(){
    alert("你好");
})

可以自己扩展,比如:

//在这里面输入任何合法的js语句(以下将演示一个自定义风格的层)
$.layer({
    type: 1,   //0-4的选择,(1代表page层)
    area: ['500px', '300px'],
    //shade: [0],  //不显示遮罩
    border: [0], //不显示边框
    title: [
        '你好,layer。',
        //自定义标题风格,如果不需要,直接title: '标题' 即可
        'border:none; background:#61BA7A; color:#fff;' 
    ],
    bgcolor: '#eee', //设置层背景色
    page: {
        html: '<div style="padding:50px;">这是一个非常普通的页面层(type:1),传入了自定义的html</div>'
    },
    shift: 'top' //从上动画弹出
});


======以下代码由 聆風沐雨 提供=======

主动调用关闭方法

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);//关闭


子层调用父层的元素

parent.$('id/class');


回调事件(close事件为子层右上角关闭按钮的点击事件触发回调函数   end事件为子层被彻底关闭后执行的回调函数)

close: function(url){

},
end: function(){
				
}
相关插件-弹出层

响应式模态框

简洁、弹出效果好的响应式模态框,适用移动端
  弹出层
 30260  352

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 42830  325

jQuery弹出层插件LIGHTBOX

这款lightbox,可应用于图片、swf文件、html文件等等.
  弹出层
 87409  452

四种简单弹窗 — 自己配置弹窗

四种弹出方式,可以非常简单的通过修改css来定义自己喜欢的样式。
  弹出层
 42715  352

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    中中 0
    2017/4/3 2:54:34

    功能很强大,但是复杂了~~

    回复
    木祁 0
    2015/6/4 18:29:17
    挺好看的。跟QQ那个差不多。我正想在我博客里做这个效果呢!谢谢共享了。。自已再在旁边加个评论功能。。帅呆了。
        廝守終身0
        2015/11/23 13:11:29

        。。。看着 挺流弊的样子

        笑对人生ㄟ0
        2016/5/24 17:05:04
        确实挺流弊的样子

        确实挺厉害,现在又出了一个UI的版本,官网可以下载,非常不错

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复