Emlog 基于HTML+JS的弹窗代码

  • 内容
  • 相关

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

效果图:

20200419122847206 (1).jpg

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:

管理员设置 回复 可见隐藏内容

黑蜘蛛

本文标签:

版权声明:若无特殊注明,本文皆为《ღ軍尐ღ》原创,转载请保留文章出处。

字数统计:本文共有 《1538》 个。

本文链接:Emlog 基于HTML+JS的弹窗代码 - https://www.4dn.net/jsxx/60.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知

评论

5条评论
  1. avatar

    扶摇可接 Lv.1 Chrome  Chrome  Android 12 Android 12 回复

    表情支持一下,黑蜘蛛博客有你更精彩

    湖北省武汉市 华中科技大学东校区

    1. avatar

      动漫网客服 Lv.1 回复

      滴!学生卡!打卡时间:下午7:56:49,请上车的乘客系好安全带~

      重庆市 电信

      1. avatar

        动漫网客服 Lv.1 回复

        滴!学生卡!打卡时间:下午5:47:55,请上车的乘客系好安全带~

        重庆市 电信

        1. avatar

          动漫网客服 Lv.1 回复

          滴!学生卡!请上车的乘客系好安全带~

          重庆市 电信

          1. avatar

            路漫 Man Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows 7 x64 Edition Windows 7 x64 Edition 回复

            滴!学生卡!打卡时间:下午4:10:42,请上车的乘客系好安全带~

            广东省广州市 电信