jQuery弹出层插件Pop

所属分类:UI-工具提示,弹出层

 12088  57  查看评论 (14)
jQuery弹出层插件Pop ie兼容9

更新时间:2017/12/21 下午7:21:04

更新说明:

1. 修改下移动窗口可出现闪跳的问题

2. 有人回复移动窗口说窗口移动不够顺滑,我在自己电脑360急速浏览器测试完全没有问题。里面用到CSS3动画效果,可能浏览器支持不够好导致的


$.Pop()介绍

Pop是基于JQ编写的一个弹出层插件,其中使用了大量CSS3效果,内置了CSS样式无需再调用CSS样式,当然您也可以使用自己的CSS样式,扩展能力极强!

Pop预设的2个弹窗参数,分别是alert,confirm,均可回调。

开始使用:

只需个用jQuery库和Pop即可

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="plug-in.min.js"></script>

调用方法

<input type="button" value="演示" onClick="$.Pop('你好,欢迎使用Pop插件','alert',function(){alert('点击确定的回调')})">

参数配置:

$.Pro('演示效果',{
    Img:false,// 是否添加一个图片 ,添加格式,Img:"img/a.jpg"
    ImgWh:"150*150",// 图片大小 格式,宽*高,默认100*100点击我查看原因
    BoxBgopacity:0.8,//背景色的透明度 0为完全透明1为完全不透明
    ZIndex:99999//css的z-index属性
    Time:3,// 延迟关闭的时间
    StartOn:false,// 插件开始时执行的事件,格式StartOn:function(){**你要执行的代码**}
    EndOn:false,// 插件结束时执行的事件,格式StartOn:function(){**你要执行的代码**}
    Class:false,// 叠加的CSS样式,用法与Pop样式叠加一直查看PopCSS样式叠加
})

更多使用方法请查看演示文件。

相关插件-工具提示,弹出层

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 11514  40

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 16946  95

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 15987  120

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 9264  51

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币

    GZJJY 0
    2018/6/11 14:23:05
    请问,这个提示层的位置可以调整吗? 回复
    xl1070410812 0
    2018/5/29 16:03:19
    ajax返回信息直接$.Pop(....);无法显示字符,有占位,f12可以看见,但是就是显示不出来作者知道为什么么,用的谷歌浏览器,Pro可以显示 回复
    King 0
    2018/5/28 11:03:39
    模态窗的样式在哪里呢 ,我需要自定义一个窗口样式 回复
    fymbin 0
    2018/5/9 13:39:43
    谢谢分享,效果还不错! 回复
    WGD1993 0
    2018/3/1 10:36:36
    你好,怎么通过自己的方法调用close() 关闭弹窗,还是自己写方法改变弹窗的样式来实现隐藏
        清风笑雪0
        2018/4/11 15:02:48
        你好,这个问题解决了吗?
    回复
    eugene710899989 0
    2018/1/12 17:18:47

    移动端不支持。。

    回复
    云魅风情 0
    2018/1/12 11:10:54

    您好,很喜欢这个插件,风格与正开发的项目相符。但是使用时css样式冲突了,覆盖了几个原有按钮的样式,而插件的右下角按钮的样式也被覆盖了,右下角按钮跑到了左下角,我看了下插件的css好多  有些无从下手,请问有什么好的解决办法吗?

        杨小样同学的快乐生活0
        2018/2/27 11:19:58
        你可以联系qq 845875158 告诉我问题 我给你解答,记得写上备注
    回复
    云魅风情 0
    2018/1/10 13:54:35
    忆 ・ 江南 0
    2017/12/27 10:54:53

    对于按钮触发的反馈提示框,就是直接显示反馈结果的,一两秒就消失的情况,用button触发事件,连续点击两次会出现页面卡死状态。

    <button id="but">按钮</button>
    $("#but").click(function() {
        $.Pro("演示效果", {
            Img: false,
            // 是否添加一个图片 ,添加格式,
            Img: "img/a.jpg"
            ImgWh: "150*150",
            // 图片大小 格式,宽*高,默认100*100点击我查看原因 
            BoxBgopacity: 0.8,
            //背景色的透明度 0为完全透明1为完全不透明
            ZIndex: 99999,
            //css的z-index属性 
            Time: 1,
            // 延迟关闭的时间
            StartOn: false,
            // 插件开始时执行的事件,格式
            StartOn: function() { ** 你要执行的代码 **
            }
            EndOn: false,
            // 插件结束时执行的事件,格式
            StartOn: function() { ** 你要执行的代码 **
            }
            Class: false, // 叠加的CSS样式,用法与Pop样式叠加一直查看PopCSS样式叠加
        })
    });
        杨小样同学的快乐生活3
        2017/12/28 20:58:16
        <a>按钮</a>
        $("a").click(function() {
            $.Pro("演示效果", {
                Time: 1,
            })
        });我看你的代码只是需要延迟改成1秒而已。其他问题:

        1. 每个扩展属性应该都以 英文状态下逗号结尾。

        2. StartOn EndOn 分别都重复使用了,尽量不要重复。

        3. ** 你要执行的代码 ** 这句话只是为了理解使用的,如果直接复制过来使用会造成乱码。

    回复
    microsoftvs 0
    2017/12/21 23:58:49

    感谢分享,效果不错的。

    回复
取消回复