双端合作弹窗规范

指在CF端的活动专题上，嵌入CFHD的活动礼包，或者相反

被嵌入弹窗地址（需要提供的素材）

PC端的地址：https://cf.qq.com/act/6787/a20211013sdu/popup/index.html

客户端内嵌的地址：https://cf.qq.com/act/6787/a20211013sdu/popup/neiqian.html

PC端的地址：https://cf.qq.com/act/6787/a20211013sdu/popup/m.html（注意不需要设置 setFont，就按照正常尺寸进行布局）

备注说明：弹窗的尺寸根据活动专题的内容决定的，所以的内嵌弹窗不需要加关闭按钮，因为关闭按钮在植入页面的弹窗上，不需要头部和尾部代码，但需要加统计代码

嵌入的活动专题-demo地址

PC端：https://cf.qq.com/act/a20161202docs/doc/act-pc.htm

客户端内嵌页：https://cf.qq.com/act/a20161202docs/doc/act-neiqian.htm

移动端：https://cf.qq.com/act/a20161202docs/doc/act-m.htm

PC端代码片段

<!-- 如果页面已经存在milo 和jquery  不需要重复引入-->
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script src="//ossweb-img.qq.com/images/js/jquery/jquery-1.9.1.min.js"></script>
<!-- 如果页面已经存在milo 和jquery  不需要重复引入-->
<style>
.iframeGift0820-box{height:902px;padding: 100px 0 0 0;}
.iframeGift0820{width: 100%;height:902px;min-width: 1200px;}
.getGift{width: 300px;height: 311px;background: url(https://game.gtimg.cn/images/cfhd/cp/a20210924mact/gj0826.png) no-repeat;position: fixed;top: 400px;right: 0;z-index: 101;cursor: pointer; animation: fadeGetGift 1000ms infinite alternate both;}
.popGift{height: 669px;width: 1050px;display: none;overflow: hidden;}
.popGift .iframeGift{height: 669px;width: 1050px;}
@keyframes fadeGetGift {
    from {opacity: 1;}
    to {opacity: 0.2;}
}
.popGift-close{background: url(//game.gtimg.cn/images/cf/cp/a20210812jbzc/close.png) no-repeat;width: 63px;height: 63px;display: block;position: absolute;top: 15px;right: 15px;text-indent: -999em;}
</style>
<div class="getGift"></div>
<div class="dia popGift" id="popGift">
    <iframe class="iframeGift" src="https://cf.qq.com/act/6787/a20211013sdu/popup/index.html" frameborder="0"></iframe>
    <a class="popGift-close" href="javascript:showDialog.hide()" title="关闭">×</a>
</div>
<script>
// 如果页面已经存在次方法  直接删除
function TGDialogS(e) {
    // 利用milo库引入dialog组件
    need("biz.dialog", function (Dialog) {
        Dialog.show({
            id: e,
            bgcolor: '#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
            opacity: 50 //弹出“遮罩”的透明度，格式为｛10-100｝，可选
        });
    });
}
// 如果页面已经存在次方法  直接删除
 $(".getGift").click(function () { 
    TGDialogS('popGift') 
})
TGDialogS('popGift') 
</script>

内嵌页代码片段

<!-- 如果页面已经存在milo 和jquery  不需要重复引入-->
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script src="//ossweb-img.qq.com/images/js/jquery/jquery-1.9.1.min.js"></script>
<!-- 如果页面已经存在milo 和jquery  不需要重复引入-->
<style>
.iframeGift0820-box{height:902px;padding: 100px 0 0 0;}
.iframeGift0820{width: 100%;height:902px;min-width: 1200px;}
.getGift{width: 250px;height: 261px;background: url(https://game.gtimg.cn/images/cfhd/cp/a20210924mact/gj0826.png) no-repeat;background-size: cover;position: fixed;top: 350px;right: 0;z-index: 101;cursor: pointer; animation: fadeGetGift 1000ms infinite alternate both;}
.popGift{height: 486px;width: 763px;display: none;overflow: hidden;}
.popGift .iframeGift{height: 486px;width: 763px;}
@keyframes fadeGetGift {
    from {opacity: 1;}
    to {opacity: 0.2;}
}
.popGift-close{background: url(//game.gtimg.cn/images/cf/cp/a20210812jbzc/close.png) no-repeat;width: 40px;height: 40px;background-size: cover;display: block;position: absolute;top: 15px;right: 15px;text-indent: -999em;}
</style>
<div class="getGift"></div>
<div class="dia popGift" id="popGift">
    <iframe class="iframeGift" src="https://cf.qq.com/act/6787/a20211013sdu/popup/neiqian.html" frameborder="0"></iframe>
    <a class="popGift-close" href="javascript:showDialog.hide()" title="关闭">×</a>
</div>
<script>
// 如果页面已经存在次方法  直接删除
function TGDialogS(e) {
    // 利用milo库引入dialog组件
    need("biz.dialog", function (Dialog) {
        Dialog.show({
            id: e,
            bgcolor: '#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
            opacity: 50 //弹出“遮罩”的透明度，格式为｛10-100｝，可选
        });
    });
}
// 如果页面已经存在次方法  直接删除
 $(".getGift").click(function () { 
    TGDialogS('popGift') 
})
TGDialogS('popGift') 
</script>

移动端代码片段

<!-- 如果页面已经存在milo 和jquery  不需要重复引入-->
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script src="//ossweb-img.qq.com/images/js/jquery/jquery-1.9.1.min.js"></script>
<!-- 如果页面已经存在milo 和jquery  不需要重复引入-->
<style>
.iframeGift0820-box{height: 11.21rem;width: 5.59rem;padding: 1rem 0 0 0;margin: 0 auto;}
.iframeGift0820{height: 11.21rem;width: 5.59rem;}
.getGift{width: 1.5rem;height: 1.5rem;background: url(https://game.gtimg.cn/images/cfhd/cp/a20210924mact/gj0826.png) no-repeat;position: fixed;top: 1.8rem;right: 0;z-index: 101;cursor: pointer;background-size: cover;}
.popGift{height: 11.21rem;width: 5.59rem;display: none;overflow: hidden;}
.popGift .iframeGift{height:11.21rem;width: 5.59rem;}
.popGift .close{right: 0rem !important;}
.popGift-close{background: url(//game.gtimg.cn/images/cf/cp/a20210812jbzc/close.png) no-repeat;width: 40px;height: 40px;background-size: cover;display: block;position: absolute;top:0;right:0;text-indent: -999em;}
</style>
<div class="getGift"></div>
<div class="dia popGift" id="popGift" style="display:none">
    <iframe class="iframeGift" id="iframeGift" src="" frameborder="0"></iframe>
    <a class="popGift-close" href="javascript:showDialog.hide()" title="关闭">×</a>
</div>
<script>
// 如果页面已经存在次方法  直接删除
function TGDialogS(e) {
    // 利用milo库引入dialog组件
    need("biz.dialog", function (Dialog) {
        Dialog.show({
            id: e,
            bgcolor: '#000', //弹出“遮罩”的颜色，格式为"#FF6600"，可修改，默认为"#fff"
            opacity: 50 //弹出“遮罩”的透明度，格式为｛10-100｝，可选
        });
    });
}
// 如果页面已经存在次方法  直接删除
$(function(){
    var fz = $("html").css('font-size')
    $("#iframeGift").attr('src','https://cf.qq.com/act/6787/a20211013sdu/popup/m.html?t='+fz)
    $(".getGift").click(function () { 
        $("#iframeGift").attr('src','https://cf.qq.com/act/6787/a20211013sdu/popup/m.html?t='+fz)
        //alert('敬请期待！')
        TGDialogS('popGift') 
    })
})
TGDialogS('popGift') 
</script>