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 = new Image(); 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:
管理员设置 回复 可见隐藏内容
黑蜘蛛
评论
5条评论扶摇可接 Lv.1 Chrome Android 12 回复
支持一下,黑蜘蛛博客有你更精彩
湖北省武汉市 华中科技大学东校区
动漫网客服 Lv.1 回复
重庆市 电信
动漫网客服 Lv.1 回复
重庆市 电信
动漫网客服 Lv.1 回复
滴!学生卡!请上车的乘客系好安全带~
重庆市 电信
路漫 Man Lv.1 Chrome 63.0.3239.132 Windows 7 x64 Edition 回复
广东省广州市 电信