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 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 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 无限级缓存的类的扩展
2009/03/16 PHP
浅析PHP Socket技术
2013/08/02 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python pdb调试方法分享
2014/01/21 Python
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
公司董事长职责
2013/12/12 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
员工拓展培训方案
2014/02/15 职场文书
父母寄语大全
2014/04/12 职场文书
干部考核评语
2014/04/29 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
三好学生个人总结
2015/02/15 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python