原生射流研究…实现简单的模态框示例

超文本标记语言部分：

img src=' http : images/8。jpg ' alt=' button class=' BTN ' id=' showMax '显示大图/button div id=' ModalBox ' class=' ModalBox ' div class=' ModalBox-matter ' header class=' ModalBox-header ' span class=' mtclose '/span/header div class=' ModalBox-body ' img src=' http : images/8-1。jpg '/div/div/div js部分：

var BTN=文档。getelementbyid(' ShowMax ')；var mtclose=文档。getelementsbyclassname(' mtclose ')[0]；var modalBox=文档。getelementbyid(' ModalBox ')；btn.addEventListener('click '，function(){ modalbox。风格。display=' block});mtclose。addeventlistener(' click ')，function(){ modalbox。风格。显示='无'；});

钢性铸铁部分：BTN { width : 100 pxh three : 35pxborder-radius : 5px；font-size : 16pxcolor: # F97B39绝对位置：top : 130 pxleft : 160 pxo pacity : 0.2 cursor :指针；/*鼠标小手*/} .btn:hover，btn:focus焦点{/*焦点取得焦点状态*/底色： # 8aa 7f 9；opa city 3360 0.5 color : # FFFFFF }。modalBox { display:无宽度： 100%;高度： 100%;位置：固定；左： 0；top : 0；z指数： 1000；背景-color: rgba(0，0，0，0.5)；}.modalBox-matter { display : flex；/*/*弹性布局*/flex-flow:列nowrap justice-内容：空格；/*两端对齐*/宽度： 50%；高度： 80%;余量： 30px汽车100 pxborder-半径：10 px-网络套件-动画：变焦0.6sanimation:变焦0.6sresize:两者；飞越：汽车；} @关键帧缩放{从{transform:比例(0)}到{transform:比例(1)} }。modalBox-页眉{边距-左侧： 617 px}.mt close { color : # 602 e2a font-size : 3 em；字体粗细：粗体；过渡：全部0.3s/* z指数： 1010；*/} . mtcloses : hover，mtclose :焦点{ color : # 602 e2a光标：指针；}.modalBox-body { padd : 10px；font-size : 16px}效果

因为正在进行的一个项目中，需要一个模态框，所以花时间在网上自学的，相对来说比较简单，可以自行修改内容。

以上这篇原生射流研究…实现简单的模态框示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。