web弹层组件

所属分类:UI-弹出层

 44945  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(){
				
}
相关插件-弹出层

一款简单实用的弹窗插件JMask(原创)

JMask是一款遮罩插件,其小巧灵活,在项目开发中方便实用。使用方式也特别简单,只需要引入一个js文件,该插件基于JQuery开发,所以使用之前需要引入JQuery文件。
  弹出层
 32673  304

vue弹窗插件vuemessage

一个基于vue的弹窗插件vuemessage
  弹出层
 50312  282

超简单实用的弹窗jquery插件

兼容到ie8,简洁,实用,美观,可以自由更改弹窗样式。可以在弹窗中加上ajax请求的数据!
  弹出层
 88756  381

jquery 弹出层

多功能表单弹出层插件,可自定义,附带可运行
  弹出层
 87019  637

讨论这个项目(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的版本,官网可以下载,非常不错

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