JS实现了点击图片后的模态框效果

很多时候我们在浏览图片的时候，会发现点击图片后，会弹出一张被点击图片的放大图，并浮在页面上，占据整个窗口。这就是图片模态框效果。

这种效果可以使用一些js库来实现，比如bpopupJs。但是这里我们用的是纯js实现，这样可以更好的理解效果原理和实现方法。

一.实现的想法

我们点击小图片后，出现图片模态框，图片模态框上有关闭按钮和图片标题。

因此，我们的实现思路是：

图片模式框有三个部分：大图、关闭按钮和图片标题。

隐藏图片模式框。点击小图片后，出现模态框。

单击关闭按钮后，模式框被隐藏。

二.HTML代码

首先，我们的原始页面上有一张图片如下：

HTML代码如下：

点击h2图片弹出模态框。/h2p图片模态盒很不错，值得学习。/pimg src=' http : star . JPEG ' id=' real ' alt=' model test picture '模态框的HTML代码如下：

div class=' motai ' id=' mo ' span class=' close ' id=' close '/spanimg class=' motai mg ' id=' moim ' div id=' caption '/div/div III。css代码

我们需要通过css设置模态框中每个元素的性能效果，同时隐藏，具体如下：

1.模态盒

# mo { display: none/*隐藏模式框*/width : 100%；高度： 100%；位置：固定；/*定位方式为固定定位*/overflow : auto；/*不滚动*/background-color:rgba (0，0，0，0.7)；top: 0pxleft: 0pxz-index : 1；/*在页面层之上*/}2。关闭按钮。关闭{ font-size : 40px；font-weight:粗体；绝对位置：top: 20pxright : 14%；color : # f1 f1；} .close:hover， close : focus { color : # BBB；cursor:pointer指针；}3.模式框中的图片

# moimg { display:块；/*图片表示为块*/margin 336025 px auto；/*图片中心对齐*/宽度：60%；最大宽度： 750 px；/*自适应布局*/}4。图片标题

# caption { text-align : center；/*文本居中*/margin : 15px auto；宽度：60%；最大高度： 750 px；font-size : 20px；color: # ccc}以上是基本模态框各元素的css代码。如果想实现点击后的动画效果，可以添加以下代码：

#moimg，# caption {-web kit-animation :前1s；-o-animate :前1s；动画：首1；} @关键帧首先{来自{transform:比例(0.1)}；}到{transform:比例尺(1)；}}通过以上步骤，我们制作了模态框页面。用js来完成交互效果就可以了。

四.js代码

Js代码主要是图片和关闭按钮的点击交互。需要注意的是，js代码必须位于模态框的HTML代码之后。js具体代码如下：

var motai=document . getelementbyid(' mo ')var moi mg=document . getelementbyid(' moi mg ')var realimg=document . getelementbyid(' real ')var caption=document . getelementbyid(' caption ')realimg . onclick=function(){ motai . style . display=' block ' moi mg . src=this . src caption . innerhtml=this . alt } var span=document . getelementbyid(' close ')；span . onclick=function(){ motai . style . display=' none '；}通过以上步骤，实现了图片的模态框效果。

最终的通用代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title close/title style # real {/*点击弹出模态框的图片*/margin : 30px；宽度： 250像素；边界半径：6 px} # real :悬停{ opa city 3360 0.6} # mo { display: none/*隐藏*/宽度： 100%；高度： 100%;位置：固定；飞越：汽车；背景-color: rgba(0，0，0，0.7)；top : 0pxleft : 0pxz-index : 1；} # moimg { display : block margin :25 px汽车；宽度： 60%;最大宽度： 750像素；} #标题{ text-align :居中；margin: 15px汽车；宽度： 60%;最大高度： 750像素；font-size : 20pxcolor: # ccc} #moimg，# caption {-网络工具包-动画：前1s；-o-动画：前1s；动画：首1;} @关键帧首先{来自{transform:比例(0.1)};}到{transform:比例尺(1);} } .关闭{ font-size : 40px字体粗细：粗体；绝对位置：top : 20pxright : 14%；颜色： # f1 f1} .close:hover，关闭：焦点{ color : # BBB光标：指针指针；} @仅媒体屏幕和(最大宽度：750像素){ # moimg {宽度： 100%；} }/style/head dyh 2图片点击弹出模态框效果/h2p图片模态框很不错，是个值得学习的效果/pimg src=' http : star。JPEG ' id=' real ' alt='模型测试图片'！-图片模态框-div class=' motai ' id=' mo ' span class=' close ' id=' close '/span img class=' motai mg ' id=' moi mg ' div id=' caption '/div script var motai=document。getelementbyid(' mo ')var moi mg=document。getelementbyid(' moi mg ')var realimg=document。getelementbyid(' real ')var caption=document。getelementbyid(' caption ')实现。onclick=function(){ motai。风格。display='span。onclick=function(){ motai。风格。显示='无'；}/脚本/正文/html以上所述是小编给大家介绍的射流研究…实现图片点击后出现模态框效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！