Javascript在单击时关闭模式图像
我在W3上使用的模式图像与本例中的编码完全相同:Javascript在单击时关闭模式图像,javascript,Javascript,我在W3上使用的模式图像与本例中的编码完全相同: //获取模式 var modal=document.getElementById('myModal'); //获取图像并将其插入模式-使用其“alt”文本作为标题 var img=document.getElementById('myImg'); var modalImg=document.getElementById(“img01”); var captionText=document.getElementById(“caption”); i
//获取模式
var modal=document.getElementById('myModal');
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById('myImg');
var modalImg=document.getElementById(“img01”);
var captionText=document.getElementById(“caption”);
img.onclick=函数(){
modal.style.display=“块”;
modalImg.src=this.src;
captionText.innerHTML=this.alt;
}
//获取关闭模态的元素
var span=document.getElementsByClassName(“关闭”)[0];
//当用户单击(x)时,关闭模式对话框
span.onclick=function(){
modal.style.display=“无”;
}
#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;
}
/*模态图像字幕*/
#标题{
保证金:自动;
显示:块;
宽度:80%;
最大宽度:700px;
文本对齐:居中;
颜色:#ccc;
填充:10px0;
高度:150像素;
}
/*添加动画*/
.模式内容#标题{
-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%;
}
}
图像模态
在本例中,我们使用CSS创建默认隐藏的模式(对话框)
我们使用JavaScript触发模态,并在单击模态时显示模态内部的当前图像。还要注意,我们使用图像的“alt”属性中的值作为模式中的图像标题文本
&时代;
您可以拿着
像这样将其环绕在图像上:
<div id="myModal" class="modal">
<span class="close"> ///Remove the ×
<img class="modal-content" id="img01">
<div id="caption"></div>
</span> ///move the close tag to here
</div>
///删除×;
///将关闭标记移到此处
var span
通过类.close
选择
。在他们的例子中:
var span=document.getElementByClassName('close')[0]
以下JS:span.onclick=function(){
modal.style.display=“无”;
}
基本上是说,单击范围时,将display:none
应用于模式样式。因此,通过将结束跨距标记移动到末端,可以将单击事件应用于整个图像
编辑使用此选项,您需要删除最初与“X”或X关联的
.close
css,否则定位将影响模式 在您提供的示例()的上下文中,您可以这样做
//Get the modal container
var modal = document.getElementById("myModal");
//Add a click event handler to hide the modal
modal.onclick = function () {
modal.style.display = "none";
};
假设这是页面上唯一的模式图像,那么这是可行的。我没有将onclick事件指定给span元素,而是将其指定给整个model
//获取模式
var modal=document.getElementById('myModal');
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById('myImg');
var modalImg=document.getElementById(“img01”);
var captionText=document.getElementById(“caption”);
img.onclick=函数(){
modal.style.display=“块”;
modalImg.src=this.src;
captionText.innerHTML=this.alt;
}
//当用户单击模式时,它将关闭
modal.onclick=function(){
modal.style.display=“无”;
}
#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;
}
/*模态图像字幕*/
#标题{
保证金:自动;
显示:块;
宽度:80%;
最大宽度:700px;
文本对齐:居中;
颜色:#ccc;
填充:10px0;
高度:150像素;
}
/*添加动画*/
.模式内容#标题{
-webkit动画名称:缩放;
-webkit动画持续时间:0.6s;
动画名称:缩放;
动画持续时间:0.6s;
}
@-webkit关键帧缩放{
来自{-webkit变换:缩放(0)}
到{-webkit转换:缩放(1)}
}
@关键帧缩放{
来自{transform:scale(0)}
到{变换:比例(1)}
}
/*关闭按钮*/
.结束{
位置:绝对位置;
顶部:15px;
右:35px;
颜色:#f1f1;
字体大小:40px;
字体大小:粗体;
过渡:0.3s;
}
.关闭:悬停,
.结束:聚焦{
颜色:#bbb;
文本装饰
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modal")[0];
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// the modal variable is already defined as the <div id="myModal">
modal.onclick = function() {
modal.style.display = "none";
}