简单的弹出二维码css.js

<!DOCTYPE html>
<html>
<head>

<style type=”text/css”>
/*二维码star*/
.qr_code_none {display:none}
.layout_qr_code {width:100%; height:100%; position:fixed; left:0; top:0; right:0; bottom:0; z-index:2000; background:rgba(255,255,255,0.95); -webkit-animation:bg_w 0.5s ease-out both; -moz-animation:bg_w 0.5s ease-out both; animation:bg_w 0.5s ease-out both}
@-webkit-keyframes bg_w {0% {background:rgba(255,255,255,0)} 100% {background:rgba(255,255,255,0.95)}}
@keyframes bg_w {0% {background:rgba(255,255,255,0)} 100% {background:rgba(255,255,255,0.95)}}
.layout_qr_code div {display:inline-block; width:52%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); font-size:0; -webkit-animation:m_b_2 0.5s 0.3s ease-out both; -moz-animation:m_b_2 0.5s 0.3s ease-out both; animation:m_b_2 0.5s 0.3s ease-out both}
.layout_qr_code div span {display:block; padding:5px; background:#FFF; border:1px solid #dbdbdb}
@-webkit-keyframes m_b_2 {0% {transform:translate(-50%,0%); -webkit-transform:translate(-50%,0%); opacity:0; -webkit-opacity:0} 100% {transform:translate(-50%,-50%); -webkit-transform:translateY(-50%,-50%); opacity:1; -webkit-opacity:1}}
@keyframes m_b_2 {0% {transform:translate(-50%,0%); -webkit-transform:translate(-50%,0%); opacity:0; -webkit-opacity:0} 100% {transform:translate(-50%,-50%); -webkit-transform:translateY(-50%,-50%); opacity:1; -webkit-opacity:1}}
.layout_qr_code div img {width:100%}
.layout_qr_code div p {margin-top:5px; line-height:1.5rem; font-size:0.75rem; text-align:center}
.layout_qr_code div p strong {display:block; font-size:0.875rem}
/*二维码end*/

/*遮罩star*/
.win_none {display:none}
.win {position:fixed; z-index:109; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.9); -webkit-animation:bg 0.3s ease-out both; -moz-animation:bg 0.3s ease-out both; animation:bg 0.3s ease-out both}
.win .transparent_bg {position:fixed; z-index:11; left:0; right:0; top:0; bottom:0}
@-webkit-keyframes bg {0% {background:rgba(0,0,0,0)} 100% {background:rgba(0,0,0,0.8)}}
@keyframes bg {0% {background:rgba(0,0,0,0)} 100% {background:rgba(0,0,0,0.8)}}
.win .layout_win {background:#FFF; position:absolute; left:0; bottom:0; right:0; z-index:12; transform:translateY(110%); -webkit-transform:translateY(110%); -webkit-animation:m_b 0.3s ease-out both; -moz-animation:m_b 0.3s ease-out both; animation:m_b 0.3s ease-out both}
@-webkit-keyframes m_b {0% {transform:translateY(110%); -webkit-transform:translateY(110%)} 100% {transform:translateY(0); -webkit-transform:translateY(0)}}
@keyframes m_b {0% {transform:translateY(110%); -webkit-transform:translateY(110%)} 100% {transform:translateY(0); -webkit-transform:translateY(0)}}
/*遮罩end*/
</style>
</head>
<body>
<li><a onClick=”document.getElementById(‘qr_code’).className=’layout_qr_code'” href=”javascript:void(0);”>关注巨匠汇</a></li>
<div id=”qr_code” class=”qr_code_none”>
<div>
<span><img src=”qrcode.jpg” id=”qr_codes”/></span>
<p>长按二维码，识别图中二维码<strong>关注xxx</strong></p>
</div>
</div>
<div id=”win” class=””><div class=”tips”></div></div>

<script>
//document.getElementById(“idname”).style.display=”none”;
//.className=”aa”
//btn1.removeEventListener(“click”,handle1,false);
//btn1.addEventListener(‘click’,handle1,false);
var handle1=function() {
document.getElementById(“qr_code”).className=”qr_code_none”;
}
var btn1=document.getElementById(“qr_codes”);/*实名函数*/
btn1.addEventListener(‘click’,handle1,false );

</script>

</body>
</html>

猜你喜欢