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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
Nov 03 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 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
mysq GBKl乱码
2006/11/28 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
师范生自荐信
2013/10/27 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
家长对学生的评语
2014/04/18 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
「月刊Action」2022年5月号封面公开
2022/03/21 日漫