web弹层组件

所属分类:UI-弹出层

 51206  413  查看评论 (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(){
				
}
相关插件-弹出层

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

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

jQuery弹出层插件

可无限次弹出,自己设置大小,手动调整大小都可(相比于layer.js要轻量)
  弹出层
 38663  318

带动画效果jQuery+CSS3实现的弹出框弹出层效果

带动画效果jQuery+CSS3实现的弹出框弹出层效果
  弹出层
 89474  453

jQuery弹出层插件gallery

这是一个图片弹出层
  弹出层
 38443  348

讨论这个项目(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
        确实挺流弊的样子
        莪???--w@砧0
        2016/12/23 9:12:35

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

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