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的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
css height属性中的calc方法详解
Jun 03 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
关于crontab的使用详解
2013/06/24 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
小学敬老月活动方案
2014/02/11 职场文书
基层党员对照检查材料
2014/09/24 职场文书
欢迎家长标语
2014/10/08 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
学会Python数据可视化必须尝试这7个库
2021/06/16 Python