html5实现点击弹出图片功能


Posted in HTML / CSS onJuly 16, 2021

下面给大家分享html5点击弹出图片,分为前台代码和js代码,具体内容如下所示:

前台代码:

<a href="javascript:;" onclick="repeat()">
 
<div id="modal_volume" style="position: fixed; text-align: center; width: 100%; height: 100%; top: 0; z-index: 9999; display: none;">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td align="center" style="">
                    <div style="width: 900px; position: relative">
                        <a href="zjb_enroll?course=专业课提高班">
                           <img src="Content/images/tanchuang.jpg" /></a>
                        <a href="javascript:$('#modal_volume').fadeOut();" style="display: block; width: 45px; height: 45px; position: absolute; right: 11px; top: 10px; z-index: 2"></a>
                    </div>
                </td>
            </tr>
        </table>
</div>

js代码

<script>
        function repeat() {
            $('#modal_volume').fadeIn();
        }
    </script>

到此这篇关于html5实现点击弹出图片功能的文章就介绍到这了,更多相关html5点击弹出图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
纯CSS3实现div按照顺序出入效果
CSS3中Animation实现简单的手指点击动画的示例
详解CSS中的特指度和层叠问题
Jul 15 #HTML / CSS
html form表单基础入门案例讲解
html+css实现环绕倒影加载特效
html5表单的required属性使用
Jul 07 #HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 #HTML / CSS
You might like
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python 变量类型详解
2018/10/10 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
征婚广告词
2014/03/17 职场文书
小学语文课后反思精选
2014/04/25 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
MySQL如何解决幻读问题
2021/08/07 MySQL
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python