王尘宇

教程演示

教程简介

基于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">QQ 微信 支付宝</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代码

.wxbox{position:fixed;top:50%;left:50%;z-index:9999;display:none;margin:0 0 0 -150px;padding:20px;width:300px;height:300px;border-radius:20px;background-color:#fff;box-shadow:0 0 10px #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}