• 华媒:全球移民定居最昂贵城市榜单发布 迪拜居首 2019-05-23
  • 孕妇也要喝奶粉?孕妇奶粉该不该喝要因人而异 2019-05-23
  • 白菜-热门标签-华商生活 2019-05-07
  • 重庆高校陆续公布招生计划、专业设置情况和新政策 2019-05-07
  • 朔州:心系贫困山区 情暖留守儿童 2019-04-26
  • 全面落实新时代党的建设总要求br以新作为开创机关党建工作新局面 2019-04-18
  • 不必违心说话,无必呢!语文是本人所有学科中最弱项,但对于你来说还是有可以学习之处的。呵呵! 2019-04-07
  • 朔州:为母亲河清淤化污 重还塞上绿洲美丽 2019-04-02
  • 【家国网聚·网络旺年】海外劲吹中国风 中国年味正全球飘香 2019-03-31
  • 脱贫攻坚正当全省“大合唱”时 2019-03-31
  • 牵手中东,日照谱写“开放活市”新篇章 2019-03-29
  • 巢湖市“文艺轻骑兵”走进市直机关幼儿园 2019-03-29
  • 立秋日 滇池上空出现七彩云霞 2019-03-26
  • 病人就医不便 护士上门服务 2019-03-26
  • 人民日报人民时评:对环境问题要“一盯到底” 2019-03-20
  • 心水论坛高手资料8438:jQuery弹窗插件

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

     10205  40  查看评论 (14)
    分享到微信朋友圈
    X
    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:"弹窗标题内容"
    });
    相关插件-弹出层

    jQuery多功能图片弹窗插件pirobox

    点击图片列表中的图片会放大,并可以随意切换
      弹出层
     16835  103

    flavr―超级漂亮的jQuery扁平弹出对话框

    flavr是一个时尚的扁平弹出对话框为您的下一个网站。flavr是响应设计布局,能够适应任何屏幕大小。得到最好的用户体验,使用流行的animate.css动画,最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。
      弹出层
     104689  767

    超简单实用的弹窗jquery插件

    兼容到ie8,简洁,实用,美观,可以自由更改弹窗样式??梢栽诘爸屑由蟖jax请求的数据!
      弹出层
     72179  163

    表格鼠标移入同行同列变色(原创)

    jQuery表格鼠标移入后同行同列变色
      弹出层
     7573  52

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

      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
          完美,谢谢
      回复
    取消回复
      短信接口
  • 华媒:全球移民定居最昂贵城市榜单发布 迪拜居首 2019-05-23
  • 孕妇也要喝奶粉?孕妇奶粉该不该喝要因人而异 2019-05-23
  • 白菜-热门标签-华商生活 2019-05-07
  • 重庆高校陆续公布招生计划、专业设置情况和新政策 2019-05-07
  • 朔州:心系贫困山区 情暖留守儿童 2019-04-26
  • 全面落实新时代党的建设总要求br以新作为开创机关党建工作新局面 2019-04-18
  • 不必违心说话,无必呢!语文是本人所有学科中最弱项,但对于你来说还是有可以学习之处的。呵呵! 2019-04-07
  • 朔州:为母亲河清淤化污 重还塞上绿洲美丽 2019-04-02
  • 【家国网聚·网络旺年】海外劲吹中国风 中国年味正全球飘香 2019-03-31
  • 脱贫攻坚正当全省“大合唱”时 2019-03-31
  • 牵手中东,日照谱写“开放活市”新篇章 2019-03-29
  • 巢湖市“文艺轻骑兵”走进市直机关幼儿园 2019-03-29
  • 立秋日 滇池上空出现七彩云霞 2019-03-26
  • 病人就医不便 护士上门服务 2019-03-26
  • 人民日报人民时评:对环境问题要“一盯到底” 2019-03-20
  • 足彩进球彩开奖 北京赛车pk10技巧5码公式 快乐扑克三有任选五吗 北京赛车彩票赚钱吗 竞猜半全场怎么看 凤凰时时彩平台 手机快乐8怎么注册 天津时时彩平台 双色球图表走势图表 时时彩缩水工具免费版 生肖时时彩投注技巧 老时时彩图五星 彩九彩票官网地址 北京赛车pk10下期预测 3d图表走势分析 双色球83复式多少钱