jQuery弹出层插件(原创)

所属分类:UI-弹出层

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

更新时间:2023-05-08 23:36:44

更新说明:

1、修改阅读模式打开、关闭动画

2、修改窗口在其他选项卡中切换时重新执行显示动画问题

3、兼容viewer.js,对于viewer.js点击关闭后,元素还存在,排除它防止元素层级过高导致viewer被覆盖

4、优化阅读窗口动画

5、更改窗口类型参数,默认type=window,阅读窗口为read

6、优化阅读窗口,自适应小屏幕/移动端


更新时间:2023-01-15 20:43:23

更新内容:

1、支持窗口内背景颜色改变

2、修复阅读模式下关闭按钮显示问题

3、修改阅读模式下关闭按钮动画


更新时间:2022-01-13 01:33:00

更新说明:

1、修改一些基本样式,从WIN10设计元素改变为贴合WIN11设计元素

2、修复一些错误


更新时间: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弹出层插件

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

各种弹窗alert

jquery弹窗
  弹出层
 67458  374

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

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

移动端弹出层jquery插件简易

移动端弹出层jquery插件简易
  弹出层
 52308  334

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

    心意动漫工作室 0
    2023/10/21 10:20:42
    content: 指定一个 DIV名称后, 第二次 打开时 为什么 DIV不显示了? 回复
    会长 0
    2023/1/19 18:36:41
    调用太多外部文件了,整合一下会更好
        砌砖工0
        2023/5/24 16:13:47
        不是很明白太多外部文件是什么意思,就一个js+css,需要拖动就引入拖动的插件。这是一个系列,只能独立拖动插件。
    回复
    又又又木 0
    2022/5/24 15:40:10
    请问可以在弹出的iframe里面往插件的回调函数里面传值吗
        又又又木0
        2022/5/24 16:08:12
        通过$.NZ_Window.close(windowid);关闭窗口,不会触发callback回调函数吗?请问有什么方法吗
    回复
    头飞雪 0
    2021/1/6 13:01:04
    有没有弹窗外点击关闭的功能
        砌砖工1
        2021/12/31 16:08:16
        关闭直接调用
        $.NZ_Window.close(windowid);
        就可以了啊。
        var windowid = $.NZ_Window.show();
    回复
    头飞雪 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
        一起学习哈。最近还将发个右键菜单的,我对细节比较在意,所以比较慢。代码可能写得不高级,但是感觉能使用就挺好的。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复