HTML中弹窗中加入图片,javascript里怎么实现点击图片弹出对话框?

JavaScript中可以使用document.getElementsByTagName方法后去img标签,然后遍历所有img标签并为其添加点击事件实现点击弹出对话框。

fe17e1b9a0a0be3abcf2bc388ce08808.png

JavaScript实现点击图片弹出对话框:

img {

width: 500px;

height: 300px;

}

//获取所有的img标签

var imgObjs = document.getElementsByTagName("img");

//遍历标签

for (var i = 0; i < imgObjs.length; i++) {

//注册点击事件,添加事件处理函数

imgObjs[i].onclick = function () {

alert("HTML中文网");

};

}

运行结果:

fdac2936c06815c6105e7180ea10446d.png

点击图片后效果:

3c8b1ed14c990d26a72838c37d906c30.png

getElementsByTagName() 方法

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法:document.getElementsByTagName(tagname)

JavaScript事件:

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dcloud课程2 什么是Dcloud

Dcloud课程2 什么是Dcloud 一、总结 一句话总结&#xff1a;DCloud提供了一套快速开发应用的跨平台技术方案。 1、DCloud的产品架构&#xff1f; MUI(H5)HBuilder 2、什么是MUI&#xff1f; 最接近原生体验的移动App的UI框架。 3、什么是H5&#xff1f; html5功能增强标准 二、…

html5 轮询自动刷新数据,后台调用exe,前端定时轮询调用结果

前提使用asp.net core 2.1前端使用vueui使用element-ui前端发送请求用Axios新建asp.net core程序1.jpg修改Index.html{Layout null;}test{{ msg }}发送请求打开记事本// 创建 Vue 实例&#xff0c;得到 ViewModelvar vm new Vue({el: #app,data: {msg: 准备发送请求打开exe},…

洛谷 P2951 [USACO09OPEN]捉迷藏Hide and Seek

题目描述 Bessie is playing hide and seek (a game in which a number of players hide and a single player (the seeker) attempts to find them after which various penalties and rewards are assessed; much fun usually ensues). She is trying to figure out in which…

linux下tomcat开启远程调试

1.center下&#xff0c;在startup.sh文件首行中添加如下语句 declare -x CATALINA_OPTS"-server -Xdebug -Xnoagent -Djava.compilerNONE -Xrunjdwp:transportdt_socket,servery,suspendn,address8000"(不要换行&#xff0c;要在同一行)Ubuntu下&#xff0c;在catali…

.NET 7 RC1 发布

原文链接&#xff1a;https://devblogs.microsoft.com/dotnet/announcing-dotnet-7-rc-1/[1]原文作者&#xff1a;Jeremy Likness&#xff0c;Angelos Petropoulos&#xff0c;Jon Douglas翻译&#xff1a;沙漠尽头的狼(谷歌翻译加持)今天我们宣布 .NET 7 候选版本 1。这是生产…

.NET MAUI实战 FilePicker

1.概要最近在迁移 GeneralUpdate.Tool的时候需要用到文件选择&#xff0c;在MAUI中可以使用FilePicker进行选择。ref1: https://gitee.com/Juster-zhu/GeneralUpdateref2:https://docs.microsoft.com/zh-cn/dotnet/maui/platform-integration/storage/file-picker?tabswindows…

从新手机到老股票 闲鱼为何会沦为骗子与营销的新平台?

国内电商一直空缺一个有规模的综合二手交易平台。闲鱼的出现&#xff0c;有一定程度上满足了喜欢淘二手、喜欢“捡漏”的用户需求。虽加入了担保和第三方支付等环节&#xff0c;但这种随机的二手交易行为不可避免地会出现上当、受骗的情况出现。本质上来说&#xff0c;闲鱼仍然…

使用C#编写一个.NET分析器(一)

译者注这是在Datadog公司任职的Kevin Gosse大佬使用C#编写.NET分析器的系列文章之一&#xff0c;在国内只有很少很少的人了解和研究.NET分析器&#xff0c;它常被用于APM&#xff08;应用性能诊断&#xff09;、IDE、诊断工具中&#xff0c;比如Datadog的APM&#xff0c;Visual…

算法学习之循环结构程序设计

for循环 打印1,2,3&#xff0c;...&#xff0c;n每个占一行。 #include <conio.h> #include<stdio.h> int main(){int i,n;scanf("%d",&n);for(i1;i<n;i){printf("%d\n",i);}getch();return 0; } 分支结合循环&#xff0c;威力很强大 输…

hibernate自定义校验器使用(字段在in范围之内)

2019独角兽企业重金招聘Python工程师标准>>> 1.自定义注解类DigitsMustIn Constraint(validatedBy DigitsMustInValidator.class) //具体的实现 Target({java.lang.annotation.ElementType.METHOD,java.lang.annotation.ElementType.FIELD}) Retention(java.lang.a…

sql将html转成excel,使用SQL*PLUS,构建完美excel或html输出

通过SQL*PLUS我们可以构建友好的输出&#xff0c;满足多样化用户需求。本例通过简单示例&#xff0c;介绍通过sql*plus输出xls&#xff0c;html两种格式文件.首先创建两个脚本:1.main.sql用以设置环境&#xff0c;调用具体功能脚本2.功能脚本-get_tables.sql为实现具体功能之脚…

一个简单的WebService服务

现在&#xff0c;网上提供的免费的webservice服务的网站&#xff1a; http://www.webxml.com.cn/从扩展名上看&#xff0c;是 .net构建的网站。看看功能的实现效果&#xff1a;需求&#xff1a;我们要远程调用手机号归属地的查询&#xff1a;开发步骤&#xff1a; 1&#xff0e…

[工具分享]备份SSAS模型TMSL脚本元数据工具,多给自己一点后悔药可吃。

笔者在2019年分享过自己写的一个小工具&#xff0c;用于备份Sqlserver数据库的元数据。近期在一个PowerBI项目中&#xff0c;发现很有必要也备份下SSAS分析模型的元数据&#xff0c;防止不小心服务器坏了或使用Tabular Editor连接数据库方式开发过程中&#xff0c;不小心覆盖了…

计算机桌面去方格子,win7桌面office图标变成白色方格图标的原因和解法

win7系统开机发现桌面上所有office图标变成白色方格图标&#xff0c;其他程序图标都正常显示&#xff0c;是怎么回事呢&#xff1f;出现这样的情况&#xff0c;一般是由于文件图标缓存错误或者丢失导致&#xff0c;找打原因后该如何解决问题&#xff1f;可以通过记事本来解决此…

Kong入门学习实践(1)基础概念快览

【API网关】| 总结/Edison Zhou最近在学习Kong网关&#xff0c;因此根据老习惯&#xff0c;我会将我的学习过程记录下来&#xff0c;一来体系化整理&#xff0c;二来作为笔记供将来翻看。由于我司会直接使用Kong企业版&#xff0c;学习过程中我会使用Kong开源版。什么是Kong&am…

条件锁

ReentrantLock类有一个方法newCondition用来生成这个锁对象的一个条件&#xff08;ConditionObject&#xff09;对象&#xff0c;它实现了Condition接口。Condition提供了线程通讯的一套机制await和signal等线程间进行通讯的方法。。1、适用场景当某线程获取了锁对象&#xff0…

计算机应用技术 平面设计,全国信息化计算机应用技术水平教育考试试卷 平面设计师...

科目编号&#xff1a;4233全国信息化计算机应用技术水平教育考试试卷(考试时间&#xff1a;180分钟 考试总分&#xff1a;100分 专业认证课程&#xff1a;Photoshop 平面设计)注意事项1、 请首先按要求在试卷的标封处填写您的姓名、考号等&#xff1b;2、 请仔细阅读各种题目的…

RabbitMQ之消息模式简单易懂,超详细分享

前言上一篇对RabbitMQ的流程和相关的理论进行初步的概述&#xff0c;如果小伙伴之前对消息队列不是很了解&#xff0c;那么在看理论时会有些困惑&#xff0c;这里以消息模式为切入点&#xff0c;结合理论细节和代码实践的方式一起来学习。正文常用的模式有Simple、Work、Fanout…

jvm系列(八):jvm知识点总览

在江湖中要练就绝世武功必须内外兼备&#xff0c;精妙的招式和深厚的内功&#xff0c;武功的基础是内功。对于武功低&#xff08;就像江南七怪&#xff09;的人&#xff0c;招式更重要&#xff0c;因为他们不能靠内功直接去伤人&#xff0c;只能靠招式&#xff0c;利刃上优势来…

计算机基础知识的文献,四 计算机文献检索基础知识(原理、结构和功能)

1.计算机检索原理计算机一方面接受用户的检索提问&#xff0c;一方面从数据库中读取文献记录&#xff0c;然后把两者进行比较&#xff0c;即检索提问标识与文献记录标识进行匹配运算&#xff0c;如果比较的结果一致&#xff0c;那么这篇文献就会作为命中文献在检索结果中显示&a…