• 人民日报人民时评:对环境问题要“一盯到底” 2019-03-20
  • 展开美丽中国的时代画卷——十九大代表聚焦生态文明建设 2019-03-20
  • 真的很美!越冬候鸟迎来迁徙高峰 2019-01-16
  • 哪些黑痣易恶变?专家:可遵循5大原则鉴别 2019-01-16
  • 今年春运购票变化大 回家的车票该咋买? 2019-01-12
  • G7峰会期间那张著名的刷屏照片......反转了? 2019-01-12
  • 世界杯首日综述:俄罗斯喜获开门红 罗纳尔多现身开幕式 2019-01-05
  • 乌兰察布(北京)招商路演会 2018-12-08
  • 水果奶奶心水论坛:jQuery弹窗插件

    致富心水论坛 www.7z1h.net 所属分类:UI-弹出层

    jQuery弹窗插件 ie兼容6

    使用方法

    1.如何加载

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

    加载css和js

    <link rel="stylesheet" type="text/css" href="translucent/style.css"/>
    <script src="//www.7z1h.net/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:"弹窗标题内容"
    });
    相关插件-弹出层

    响应式模态框

    简洁、弹出效果好的响应式模态框,适用移动端
      弹出层
     14975  108

    18种弹框特效

    18种弹框特效
      弹出层
     53703  503

    各种弹窗alert

    jquery弹窗
      弹出层
     35437  76

    jQuery弹出层插件gallery

    这是一个图片弹出层
      弹出层
     18106  71

    讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

      厦门卤面 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
          完美,谢谢
      回复
    取消回复
      短信接口
  • 人民日报人民时评:对环境问题要“一盯到底” 2019-03-20
  • 展开美丽中国的时代画卷——十九大代表聚焦生态文明建设 2019-03-20
  • 真的很美!越冬候鸟迎来迁徙高峰 2019-01-16
  • 哪些黑痣易恶变?专家:可遵循5大原则鉴别 2019-01-16
  • 今年春运购票变化大 回家的车票该咋买? 2019-01-12
  • G7峰会期间那张著名的刷屏照片......反转了? 2019-01-12
  • 世界杯首日综述:俄罗斯喜获开门红 罗纳尔多现身开幕式 2019-01-05
  • 乌兰察布(北京)招商路演会 2018-12-08