HTML实现二维码弹框

前言

在之前写网站的时候,需要在用户点击时弹出二维码图片。网上有很多这样的代码,但发现好多是只能够用于PC端,在移动端网页的效果不理想,后来找到一个在PC端和移动端都适配的比较好的代码,这里记录一下。

注:代码来自网络上的博客,非原创,原文请点击HTML5 微信二维码提示框。本例中对弹出窗体的外观做了点小小的改动,基本框架不变。

前端代码



供点击的标签:


触发事件:

![](./img/QQ_QR.jpg)
×

弹出效果

本例:

HTML实现二维码弹框_第1张图片
image.png

原博客上的弹出效果:

HTML实现二维码弹框_第2张图片
image.png

差别就是去掉了黑色边框,关闭按钮的大小和颜色不同,其余的一样。

后记

后来又发现一个弹窗,这里也mark一下:DIV+JS+CSS实现点击弹出图片效果
效果如下:

HTML实现二维码弹框_第3张图片
image.png

上图来源于原博客。

在更新一个资源站:站长素材

HTML实现二维码弹框_第4张图片
image.png

你可能感兴趣的:(HTML实现二维码弹框)