UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery弹窗插件

所属分类：UI-弹出层

 37423  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弹出层插件(原创)

 简约的jQuery弹出层插件
  弹出层
 25792  243

悬浮九宫格菜单jQuery插件

 悬浮九宫格菜单jQuery插件
  弹出层
 47228  447

超简单实用的弹窗jquery插件

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

jquery弹出框插件dialogbox

 jquery弹出框插件dialogbox
  弹出层
 53210  317

讨论这个项目（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
        完美，谢谢
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复