[Emlog教程] Emlog基于HTML+JS的弹窗代码

基于HTML+JS完整好看的弹窗代码,代码提取于明月浩空的模板非常的实用!

截图

HTML

<a href="javascript:void(0)"  onclick="weixin('图片地址')">输出位置</a>
<div class="wxbox" style="display: none;"><ul><p class="wxclose"><span class="wxtitle"></span><a href="javascript:;" title="关闭"><i class="fa fa-times"></i></a></p><span class="wxpic"></span></ul></div>

JS

function weixin(a){
	$(".blackground").fadeIn(100);
	$(".wxtitle").html('<i class="fa fa-qrcode"></i> <span style="color:#f00">微信</span> 扫一扫关注')
	$(".wxbox,.wxpic").animate({ opacity:"show", marginTop:"-170px"},"slow")
var wx =newImage(); wx.src =a;
	wx.onload =function(){ setTimeout(function(){ $(".wxpic").html('<img src="'+wx.src+'" style="width:260px;height:240px;margin-top:-10px">')},100)};
};
$(function(){jQuery(function(){var meta = document.getElementsByTagName('meta');var a = encodeURIComponent(location.href), b = encodeURIComponent(document.title); $(".wxclose a").click(function(){ $(".blackground").fadeOut(100); $(".wxbox").animate({ opacity:"hide", marginTop:"-300px"},"slow")})})});

CSS

.wxbox{position:fixed;top:50%;left:50%;z-index:9999;display:none;margin:000-150px;padding:20px;width:300px;height:300px;border-radius:20px;background-color:#fff;box-shadow:0010px#000}
.wxbox .wxclose{margin-bottom:10px;color:#000;font-weight:700;font-size:18px}
.wxbox .wxclose a{float:right;display:block;width:19px;height:19px;-webkit-transition:all .6s ease-in-out 0s;-moz-transition:all .6s ease-in-out 0s;transition:all .6s ease-in-out 0s}

以上教程结束!