jQuery弹出层插件(原创)

所属分类:UI-弹出层

 16016  160  查看评论 (19)
分享到微信朋友圈
X
jQuery弹出层插件(原创) ie兼容10

更新时间:2020-01-17 23:37:28

更新说明:版本v4.3.0

1、修复最大化可拖动、改变大小的问题

2、去除对于图片的依赖

3、更新拖动插件

4、由于使用的不多,固取消了fontawesome用背景图替代

5、UI细微调整


所有参数:

{
    title: '标题',
    width: 800,
    height: 600,
    url: '', //窗口打开链接
    content: '', //显示的内容或对象ID
    top: null, //纵坐标
    left: null, //横坐标
    tools: {
        close: true, //是否显示关闭按钮
        max: true, //是否显示最大化按钮
        refresh: true, //是否显示刷新按钮(存在情况下显示)
        newWindow: true, //是否显示打开新窗口按钮
        subscript: true, //角标(用于拖动窗口大小)默认显示
    },
    style: {
        shadow: true, //周围阴影效果
        corner: false, //是否圆角
        color: '' //颜色(16进制的颜色代码)
    },
    isdrag: true, //是否允许拖动窗口
    autoSize: false, //自适应大小(只限网页)
    before: function() {}, //弹出前事件
    callback: function() {} //回调函数
}

基本使用方式:

打开一个指定大小的窗口

$.NZ_Window.show({
    width: 500,
    height: 300,
    url: 'https://baidu.com'
});

打开一个【 带标题】 窗口

$.NZ_Window.show({
    title: "这是标题",
    url: 'https://baidu.com',
});

打开一个【 非URL】 窗口

var testobj = $("<div style=\"width:200px;height:200px;background-color:#ff0000;margin:50px auto;\"></div>");
$.NZ_Window.show({
    content: testobj
});

打开一个【 带标题】 窗口

$.NZ_Window.show({
    title: "这是标题",
    url: 'https://baidu.com',
});

控制窗口操作按钮

$.NZ_Window.show({
    url: 'https://baidu.com',
    operate: {
        btn_Close: true,
        btn_Max: false,
        btn_Refresh: false,
        btn_NewWindow: false,
        resize: false
    }
});
相关插件-弹出层

移动端弹出层jquery插件简易

移动端弹出层jquery插件简易
  弹出层
 45550  279

jquery鼠标悬停滑动切换特效

jquery鼠标悬停滑动切换特效
  弹出层
 27920  335

jQuery图像展示插件Strip

Strip是Lightbox的一种,它只能部分覆盖页面。这样就不会占用大的屏幕面积,适用于比较小的移动设备
  弹出层
 27550  339

悬浮九宫格菜单jQuery插件

悬浮九宫格菜单jQuery插件
  弹出层
 41145  387

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

    头飞雪 0
    2021/1/6 13:01:04
    有没有弹窗外点击关闭的功能 回复
    头飞雪 0
    2021/1/6 12:58:07

    请问这样的场景怎么使用?

    <div class="news">
        <a id="101">1、一个个性化标题栏</a>
        <a id="102">2、打开个性化窗口</a>
        <a id="103">3、打开个性化窗口</a>
        <a id="104">4、打开个性化窗口</a>
        <a id="105">5、打开个性化窗口</a>
    </div>
    回复
    aXXx 0
    2020/4/3 14:59:44
    请问,支持移动端吗?
        砌砖工0
        2020/4/16 9:28:12
        针对PC的哈。
    回复
    Fortunato 0
    2020/2/18 15:16:08
    请问怎么取消loding这个动画呀,我url里面写的是本地的一个网页,要等很久loading结束才行
        砌砖工1
        2020/2/24 16:04:16
        你先看看你是否在网页写了什么需要加载很久的,这个其实就是document.ready事件后就隐藏了。
    回复
    slient voice 0
    2020/1/10 16:20:25
    大佬有更新吗?
        砌砖工0
        2020/1/10 16:24:28
        有出现什么问题吗?
    回复
    AAAAAAAAAA** 0
    2019/10/26 19:53:07
    linux上您的js无法访问,是您对js做了什么处理吗,还有您的js在工程里跟别的js显示的格式也不一样,文件头上有个小js图标 ,其他js图标是显示在下面的
        砌砖工0
        2019/11/1 17:35:50
        抱歉哈。我没用过linux,不知道是怎么样的。会不会是编码问题?
    回复
    网页设计-李肖 0
    2019/10/25 14:03:02
    下载学习中
        砌砖工0
        2019/11/1 17:37:07
        一起学习哈。最近还将发个右键菜单的,我对细节比较在意,所以比较慢。代码可能写得不高级,但是感觉能使用就挺好的。
    回复
    AAAAAAAAAA** 0
    2019/10/8 12:56:44
    请问点击窗口X号的时候,关闭触发事件有吗,怎么加入是否确定关闭提示
        砌砖工1
        2019/10/9 16:45:38

        确认关闭这个目前没有,但是关闭的回调函数是有的。
        例如:

        var windowid = $.NZ_Window.show({
            url: "https://baidu.com",
            width: 800,
            height: 550,
            callback: function() {
                alert("你关闭了一个窗口");
            }
        });
    回复
    伍键炜 0
    2019/9/11 11:22:57
    请问头部引入需要引入您的哪一个JS文件。
        砌砖工1
        2019/9/16 16:09:35
        主要:
        NZ-Window.min.js
        NZ-Window.min.css
        拖动窗口插件:
        NH-Drag.min.js
        当然还需要引入Jquery.js了
        砌砖工0
        2019/9/16 16:16:34
        对了,还需要fontawesome.css,有个类型窗口的关闭按钮需要用到。
    回复
    Puumm 0
    2019/9/7 17:45:54
    请问在窗口里怎么关闭窗口啊,不点击X的,用jquery
        砌砖工3
        2019/9/9 10:45:10

        1、如果是

        window.parent.window.$.NZ_Window.close();

        或者是顶级窗口

        window.top.window.$.NZ_Window.close();

        2、如果是动态元素,直接$.NZ_Window.close();
        3、如果打开多个窗口要关闭指定窗口,在调用【$.NZ_Window.show()】会返回一个ID,用这个ID去关闭,如:

        var windowid = $.NZ_Window.show({ url:"xxxx.html" });
        $.NZ_Window.close(windowid);

        推荐这样写法,毕竟好。

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