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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js中判断控件是否存在
2010/08/25 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Django中create和save方法的不同
2019/08/13 Python
Python使用贪婪算法解决问题
2019/10/22 Python
python 导入数据及作图的实现
2019/12/03 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
linux 下selenium chrome使用详解
2020/04/02 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
汽车专业学生自我评价
2014/01/19 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
保安2014年终工作总结
2014/12/06 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书