jQuery弹窗插件

所属分类:UI-弹出层

 38504  330  查看评论 (18)
分享到微信朋友圈
X
jQuery弹窗插件 ie兼容6

使用方法

1.如何加载

本插件基于jquery开发,请预先加载jquery

加载css和js

<link rel="stylesheet" type="text/css" href="translucent/style.css"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="translucent/jquery-translucent.js"></script>

2.调用此插件

$("body").translucent();

如此就可以在窗口显示一个弹窗了

当然也可以加到其它指定的容器中

3.参数

width: 500, //默认宽度
height: 500, //默认高度
drag: true, //启动拖拽
opacity: 0.8, //透明度
border: "1px solid #ddd",
borderRadius: 8,
backgroundColor: "rgb(225, 225, 225)", //默认背景色
titleHeight: "40px", //title高度
titleGroundColor: "#999", //title默认背景色
shadow: true, //开启阴影
positionTop: 100, //默认定位位置
positionLeft: 100,
titleText: "新建弹窗", //标题文本
titleFontSize: 12,
titleFontColor: "#000",
titleFontFamily: "微软雅黑",
textHtml: "这是一个新建的弹窗!",
titleTextCenter: false,
close: null //关闭窗口回调函数,传出参数当前弹窗的jquery dom节点,
zIndex: 10

可以通过参数改变弹窗样式位置等

$("body").translucent({
    width:1000,
    textHtml:"<div>这是一个新建的弹窗!</div>",
    titleText:"弹窗标题内容"
});
相关插件-弹出层

jQuery弹出层插件LIGHTBOX

这款lightbox,可应用于图片、swf文件、html文件等等.
  弹出层
 97586  512

移动端弹出层jquery插件简易

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

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

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

18种弹框特效

18种弹框特效
  弹出层
 89551  893

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

    养肉肉 0
    2019/10/12 16:01:48
    我想在页面上出现两个这样的悬浮窗,应该怎么操作呀
        ELLIPSIS0
        2020/7/16 23:32:12
        我已经懒得维护这个插件了,这是我2年前刚入职的时候练手写的。代码写的太垃圾了,不维护了,所以有特殊需求的自己去源码里缝缝补补的用吧
    回复
    Better 0
    2019/6/13 17:13:04
    性能太差了。
        ELLIPSIS0
        2019/9/24 16:12:20
        我也这么认为
    回复
    0
    2019/3/24 21:37:48
    请教能否支持 1.自动屏幕居中;2.关闭窗口放大缩小按钮
        ELLIPSIS1
        2019/3/25 16:37:44
        您可以通过计算动态设置 positionTop: 100, positionLeft: 100 的值来达到居中的目的;放大缩小按钮不想要的话,您可以到源码里找到俩个img标签注释掉即可
    回复
    厦门卤面 0
    2018/12/18 15:00:48
    效果很好,很喜欢!
        ELLIPSIS0
        2018/12/19 10:00:30
        谢谢
    回复
    ELLIPSIS 0
    2018/11/21 9:18:33
    如何可以改为不用jqB下载啊,我是作者,我想改为免费下载
        天羽恋0
        2018/11/21 13:48:05
        可以提供下其他免费下载地址?谢谢
        ELLIPSIS0
        2018/11/21 13:55:40
        没有其它下载地址哦,这个插件是我自己做的。在ZH我做了笔记,写了拓展插件的感悟,上边是附了源码的,不过没打包,你可以去看看 https://zhuanlan.zhihu.com/p/48039282
        天羽恋0
        2018/11/21 13:58:49
        可不可向您求个打包文件啊
        ELLIPSIS0
        2018/11/21 14:26:20
        没有jq币的小伙伴可以来这里检出一下 https://github.com/hulalalalala/translucent ,记得临走前给我在jq22的插件点个收藏,手有余香。如果jq币有富余,还是在这里下载支持一下作者原创
        天羽恋0
        2018/11/21 14:32:52
        已收藏,谢谢
        天羽恋0
        2018/11/21 14:37:49
        个人觉得关闭按钮提示应完善一个取消就更完美了
        ELLIPSIS1
        2018/11/21 14:46:29

        源码中 closeWindow方法改一下,去掉窗口移除的代码,如下:

        closeWindow: function() {
            var context = this;
            $("#translucent_close").bind("click", function() {
                if (context.config.close !== null && typeof context.config.close === "function") {
                    context.config.close($(".translucent-container"));
                }
                // $(".translucent-container").remove();
            });
        
        },

        然后你在html中调用的时候,关闭回调函数那里,写一个关闭提示窗口,点是的时候再加上窗口移除的代码,我这里是用的layui的提示窗口:

        $body.translucent({
            // height:450,
            width: 400,
            height: 420,
            positionLeft: posLeft,
            positionTop: posTop,
            titleText: "概要信息",
            titleGroundColor: "#3385FF",
            backgroundColor: "#ffffff",
            titleFontColor: "#ffffff",
            titleFontFamily: "Tahoma, Verdana, 宋体",
            opacity: 0.8,
            zIndex: 100,
            textHtml: html,
            close: function($dom) {
                layer.confirm('确定要关闭吗?', {
                    btn: ['确定', '取消'] //按钮
                }, function() {
                    $dom.remove();
                    layer.closeAll();
                    return true;
                }, function() {
                    layer.closeAll();
                    return false;
                }, {
                    icon: "3"
                });
            }
        });
        天羽恋0
        2018/11/21 15:12:03
        完美,谢谢
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复