插件描述：支持拖拽，放大，缩小，最小化窗口的符合jquery语法规范的插件
使用方法
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:"弹窗标题内容"
});
PREVIOUS:
NEXT:
相关插件-弹出层
讨论这个项目（18）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
养肉肉 0
2019/10/12 16:01:48
-
我想在页面上出现两个这样的悬浮窗，应该怎么操作呀
ELLIPSIS0
2020/7/16 23:32:12
-
我已经懒得维护这个插件了，这是我2年前刚入职的时候练手写的。代码写的太垃圾了，不维护了，所以有特殊需求的自己去源码里缝缝补补的用吧
钢 0
2019/3/24 21:37:48
-
请教能否支持 1.自动屏幕居中；2.关闭窗口放大缩小按钮
ELLIPSIS1
2019/3/25 16:37:44
-
您可以通过计算动态设置 positionTop: 100, positionLeft: 100 的值来达到居中的目的；放大缩小按钮不想要的话，您可以到源码里找到俩个img标签注释掉即可
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
-
完美，谢谢
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
