Html 如何使按钮关闭图像？_Html

Html 如何使按钮关闭图像？

html

Html 如何使按钮关闭图像？,html,Html,我是一个完全不懂编码的人，现在必须为学校的网站编码。我正在尝试创建一个显示图像的按钮，下面是代码。我现在想要的是创建另一个按钮，使图像再次关闭。我在谷歌上搜索过，但只能找到解释如何使按钮返回到另一个页面的内容，但我只想让它关闭图像，有人能帮忙吗 <html> <head> <title>click</title> <style> #image{ display:non

我是一个完全不懂编码的人，现在必须为学校的网站编码。我正在尝试创建一个显示图像的按钮，下面是代码。我现在想要的是创建另一个按钮，使图像再次关闭。我在谷歌上搜索过，但只能找到解释如何使按钮返回到另一个页面的内容，但我只想让它关闭图像，有人能帮忙吗

    <html>
<head>
  <title>click</title>
  <style>
           #image{
                display:none;
      }
      </style>
</head>
  <body>
      <div>
           <img src="imgpinnwand/flyer_NEU.png" width=800 height=400 id="image" alt="Flyer" />
      </div>

      <button type="button" onclick="imageShow()"><img src="imgpinnwand/Postit.png" width=400 height=400></button>

       <script>
             function imageShow(){
                    document.getElementById('image').style.display = "block";       
                    }
        </script>
</body>
</html>


点击
#形象{
显示：无；
}
函数imageShow（）{
document.getElementById（'image'）.style.display=“block”；
}

我希望这就是您要找的。是如何创建模型图像的完整指南

//获取模式
var modal=document.getElementById（“myModal”）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（“myImg”）；
var modalImg=document.getElementById（“img01”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
}
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}

body{font-family:Arial、Helvetica、sans-serif；}
#myImg{
边界半径：5px；
光标：指针；
过渡：0.3s；
}
#myImg:hover{opacity:0.7；}
/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.9）；/*黑色w/不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
/*添加动画*/
.模式内容#标题{
-webkit动画名称：缩放；
-webkit动画持续时间：0.6s；
动画名称：缩放；
动画持续时间：0.6s；
}
@-webkit关键帧缩放{
来自{-webkit变换：缩放（0）}
到{-webkit转换：缩放（1）}
}
@关键帧缩放{
来自{transform:scale（0）}
到{变换：比例（1）}
}
/*关闭按钮*/
.结束{
位置：绝对位置；
顶部：15px；
右：35px；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
/*较小屏幕上的100%图像宽度*/
@仅介质屏幕和（最大宽度：700px）{
.模态内容{
宽度：100%；
}
}


&时代；