隐私条款

html

<div class="form-group">
    <div class="col-sm-10 col-xs-12 col-md-offset-2 yins">点击提交代表您同意<span class="clickyin">《个人信息授权及保护声明》</span></div>
</div>

<div class="privacy">
    <div class="con">
        <div class="gb gbll">x</div>
        <div class="contents">
             <iframe src="https://www.lianqixinxi.com/p/privacy.html" frameborder="0"></iframe>
        </div>阿
        <div class="tongan gbll">同意并继续</div>
    </div>
</div>

<script>
    $('.clickyin').click(function(){
        $('.privacy').show();
    })
    $('.privacy .gbll').click(function(){
        $('.privacy').hide();
    })
</script>

css

/* 隐私 */
.privacy{position:fixed;left:0;top:0;width:100%;height:100%;z-index:999999;display:none}
.privacy:after{content:'';display:block;background:rgba(0,0,0,.3);position:absolute;top:0;left:0;width:100%;height:100%}
.privacy .gb{position:absolute;right:0;top:0;width:60px;line-height:56px;background:#000;color:#fff;text-align:center;font-size:26px;z-index:2;height:60px;cursor:pointer}
.privacy .con{max-width:1200px;background:#fff;position:absolute;left:50%;transform:translateX(-50%);z-index:1;width:100%;padding:30px 0 30px}
.privacy .con .contents{width:100%;height:calc(100vh - 130px);padding:0 15px;overflow-x:hidden}
.privacy .con iframe{width:100%;height:calc(100vh - 60px)}
.privacy .tongan{line-height:40px;text-align:center;color:#fff;background:#e22;font-size:14px;height:40px;margin:30px auto 0;max-width:200px;width:50%;cursor:pointer}
.yins{color:#666;font-size:14px;cursor:pointer}
.yins span{color:#000}
@media (max-width:480px){
	.privacy .gb{width:30px;line-height:26px;font-size:20px;height:30px}
}