模态框在网页中非常常见，即在当前页面中弹出一个框，用于与客户进行交互。

像这样。

首先，我们需要了解框架的工作原理，以及如何与后端进行交互。这里就不先介绍了。首先，我们简单了解如何在网页中实现这样一个框图的外观。值得注意的是，在生成框图时，我们通常会滚动鼠标发现网页还在移动。为了实现该框图，添加了两个框

第一个盒子实现背景：

覆盖整个页面(透明色)

第二个框实现了交互框。

边肖在这里实现了最简单的交互框(代码量可能会多一点，主要是因为整体结构还是很简单)

代码如下：

模拟框最关键的一步是写风格时先显示： one；让他们不显示，然后用js touch改变显示，然后告诉他们显示。

单击标题显示弹出框/标题样式类型=' text/CSS ' * { margin : 0；padd : 0；} # BTN { text-align : center；} .a1 { display:块；文本装饰：无；//创建超链接，点击弹出框} # back { width : 100%；高度： 100%；background: rgba(0，0，0， 5)；//将黑色位置：的透明色设置为固定；//在页面上绝对定位top : 0；left : 0；z-index : 999；//设置更高权重的display: none，因为要覆盖整个网页；} # login { display: none宽度： 400 px；高度： 250 px；背景-color : # fff；位置：固定；top :50%；左侧：50%；margin :-125 px 0 0-200 px；z-index : 1000；}//帧的样本也像背景# close _ all { position : absolute；top:10pxright:10px宽度：15 px；height:15pxfont-size :15 px；cursor:指针；//鼠标在此步骤悬停时换手}//将符号放在右上角/style script type=' text/JavaScript ' window . onload=function(){ varbtn=document . getelementbyid(' BTN ')；var back=document . getelementbyid(' back ')；var log in=document . getelementbyid(' log in ')；var close _ all=document . getelementbyid(' close _ all ')；BTN . onclick=function(){ back . style . display=' block '；log in . style . display=' block '；} close _ all . onclick=function(){ back . style . display=' none '；log in . style . display=' none '；} }/script/head dydiv id=' BTN ' a href=' JavaScript :'rel=' external no follow ' class=' a1 '单击我登录/a/div id=' back '/div div id=' log in ' span id=' close _ all '/span/div/body。以上就是本文的全部内容。希望对大家的学习有帮助，多多支持我们。