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 clip-path 用法介绍详解
Mar 01 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
js实现录音上传功能
2019/11/22 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
python实现视频分帧效果
2019/05/31 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
校园文化建设方案
2014/02/03 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
学生干部培训方案
2014/06/12 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
简单谈谈Python面向对象的相关知识
2021/06/28 Python