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 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python decimal模块使用方法详解
2020/06/08 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python基于win32api实现键盘输入
2020/12/09 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
开展读书活动总结
2014/06/30 职场文书
学校教研活动总结
2014/07/02 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
免职通知
2015/04/23 职场文书
村党组织公开承诺书
2015/04/30 职场文书
师范生见习总结范文
2015/06/23 职场文书
2019年思想汇报
2019/06/20 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python