主页 前端技术区 常见的手机端底部弹出层源代码
狄默默斯基
发表于2020-04-27 09:48:15    只看楼主
楼主
头衔:  精益求精
注册时间: 2014-02-09
用户组: 日常管理组
发帖数:  566
金币数:  310
短消息
这段代码精简了一下,用来备份,以备不时之需。
啦啦啦啦啦啦啦啦啦
<div class="gy-paylayer wx_pay" id="payTips">
<div class="gy-paylayer-box">
	<div class="gy-paylayer-box-bd tab_bd">
		<div class="gy-box1" style="text-align: center;font-size: 18px;padding-top: 10px;">朋友圈配文</div>
		<div class="gy-box2" style="font-size: 16px;padding: 20px 20px 10px 20px;">{$sharecopyone}</div>
		<div class="gy-box3">
			<div id="gy-box3-copy" data-clipboard-text="{$sharecopyone}" style="position:absolute;bottom:20px;right:10px;background:#00bea9;width:140px;height:42px;line-height:42px;text-align:center;color:#fff;font-size:14px;border-radius:20px;">
				一键复制
			</div>
			<script>
				//必须要初始化 第一种初始化
				var clipboard = new ClipboardJS('#gy-box3-copy');
				clipboard.on('success', function(e) {
					FoxUI.toast.show('配文复制成功');
				});
				clipboard.on('error', function(e) {
					FoxUI.toast.show('复制失败');
				});
			</script>
		</div>
	</div>
	<div class="gy-paylayer-close close"></div>
</div>
</div>
<div class="c-btnBar_fixed dtl-btnBar">
	<button class="c-btn c-btn_rds dtl-btnSopport"><i class="iconfont icon-xiangshang">  朋友圈配文</i></button>
</div>
<style>
	.c-btnBar_fixed {
    position: fixed;
    bottom: 20px;
    right: 120px;
    box-sizing: border-box;
    z-index: 110;
}.c-btnBar_fixed:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.1);
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    z-index: 110;
}.page-detail .dtl-btnSopport {
    display: block;
}
.c-btn {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    width:150px;
    height:42px;
    line-height:42px;
    text-align: center;
    text-decoration: none;
    color: #4d3306;
    background-color: #eed499;
    border-radius: 20px;
    overflow: hidden;
    border:none;
}
.gy-paylayer-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #687684;
    line-height: 1.5;
    font-size: 14px;
    background-color: #fff;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 1000;
}.gy-paylayer.show .gy-paylayer-box {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}.gy-paylayer-box-hd {
    position: relative;
    overflow: hidden;
}.gy-paylayer-box-hd:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #dee4e8;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}.gy-paylayer-box-bd {
	position:relative;
    min-height: 200px;
    padding-bottom: calc(constant(safe-area-inset-bottom) - 20px);
    padding-bottom: calc(env(safe-area-inset-bottom) - 20px);
}.gy-paylayer-close {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 30px;
    height: 30px;
}.gy-paylayer-close:after, .gy-paylayer-close:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #687684;
    -webkit-transform: translate(-50%,-50%) rotate(45deg);
    transform: translate(-50%,-50%) rotate(45deg);
}.gy-paylayer-close:before {
    width: 2px;
    height: 26px;
}.gy-paylayer-close:after {
    width: 26px;
    height: 2px;
}
.maskzz {
      position: absolute; top: 0px; filter: alpha(opacity=75); background-color: #000;
      z-index: 100; left: 0px;bottom:0;right:0;
      opacity:0.75; -moz-opacity:0.75;
      display:block;
    }
.copy-success-img{
    width: 305px;
    height:148px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background:url('../addons/ewei_shopv2/plugin/article/static/images/copy-success.png');
    background-size:cover;
}
</style>
<script>
	$(".dtl-btnSopport").click(function(){
    $("body").append("<div class='maskzz'></div><div class='copy-success-img'></div>");
		$("#payTips").addClass("show");
	})
	$(".gy-paylayer-close ").click(function(){
		$(".maskzz,.copy-success-img").remove();
		$("#payTips").removeClass("show");
	})
</script>
引用  你好陌生人 ~ 千万别说爱 ~ 让我保持等的姿势继续期待

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理