现在位置首页 / 前端开发 /正文

Jquery弹出框插件ColorBox打开iframe并传值demo

作者: IT小兵 | 2014年10月23日| 热度:℃ | 评论: |参与:

在[jquery colorbox完整使用说明+demo下载]  [jquery简单实用弹出框控件-Colorbox事件例子]几篇中,说明COlorBox的基本使用方法,今天分享一个完整的demo:ColorBox打开iframe并传值demo。

没有耐心的同学,看直接down demo看看:

Demo百度网盘下载地址:链接:http://pan.baidu.com/s/1jGutSMU   密码:ih1v

一、html定义ColorBox打开按钮

  <div class="space-4"></div>
        <div class="form-group">
            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"><span class="red">&lowast;</span> 位置</label>
            <div id="txtposition"></div>
            <div class="col-sm-9 text-left">
                <button class="red margin-left-15 position-relative top-5 cursor-pointer text-font-14"
                      onclick="OpenPage('SelectMap.html')">点击从地图选择1&rarr;</button>
                <a id="aRealOpenMap" style="display:none;" class='red margin-left-15 position-relative top-5 cursor-pointer text-font-14 iframe'>
                    点击从地图选择2
                </a>
                <input type="text" style="width: 200px" 
                       readonly="readonly" class="col-xs-10 col-sm-8" id="txtMpFanWei" />
                <input type="text" id="txtdizhi" placeholder="商家地址" class="col-xs-10 col-sm-5" />
            </div>
        </div>

这里需要注意一点:我用ColorBox打开的url是动态+参数的,因此我定义了一个Button是显示的用来产生动态参数,而隐藏一个a用来接收url,并激发Colorbox的弹出事件。

二、按钮事件

  <script type="text/javascript" defer>
            function OpenPage(url) {
                var city = 1222;
                if (city == null || city == "0") {
                    alert("请先选择一个城市,方便在地图上定位。");
                    return;
                }
                var cityname ="济南";
                var fanwei = $("#txtMpFanWei").val();
                if (fanwei != "") {
                    url = url + "?fanwei=" + fanwei + "&city=" + cityname;
                }
                else {
                    url = url + "?city=" + cityname;
                }
                $("#aRealOpenMap").attr("href", url);
                $(".iframe").colorbox({ iframe: true, width: "90%", height: "95%" });
                $("#aRealOpenMap").click();
                // var k = window.open(url, "x", "height=800, width=900, top=10,  scrollbars=yes, resizable=yes,location=no, status=no");
            }
        </script>

代码比较明白的。就是动态给a复制href,并绑定一下colorbox,接着激发按钮的click事件打开页面。

三、打开页面内数据传值给父页面

 function SetParentPage(returnvalue, nidizhi) {
              
            var k = parent;
            k.document.getElementById("txtMpFanWei").value = returnvalue;
            k.document.getElementById("txtdizhi").value = nidizhi;
            parent.$.colorbox.close();
        }

这里大家应该看到一个代码:  parent.$.colorbox.close();。调用父页面的colorbox关闭事件。如果在本页面调用是无法关闭弹窗口的。


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询