制作一个简单的HTML模态框

墨蓝 2023-10-09 10:43 25阅读 0赞

在网页中，时常会用到**模态框**，比如：用bootstrap库中的模态框效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]  
一个模态框大致分为三个部分，顶部、主体部分和底部，这三个部分放在同一个div（盒子）中

1.  顶部  
    顶部主要放标题，和关闭按钮（顶部右上角是个按钮，可以换别的 但是按钮有点击效果），非必须。
2.  主体  
    用来存放主要控件，比如你要使用模态框做登录，那么登录主体控件（输入框、提示）就放在主体部分。
3.  底部  
    底部主要用来放一些按钮，比如关闭按钮、确定按钮等，按钮大小位置都可以自己决定。非必须。

为了方便理解，就先写HTML代码（暂时不放标题、关闭按钮）

<div class="modal-box">
    	
    	<div class="modal-box-top">
    	</div>
    	
    	<div class="modal-box-content">
    	</div>
    	
    	<div class="modal-box-bottom">
    	</div>
    </div>

如上面代码所示，一个模态框最外层是个div，并添加类名modal-box,里面的三个部分也是使用的div，并添加相应的类名。  
接下来就是css代码，代码中已经做了很多注解解释了 所以就不多说了，主要注意一下**box-sizing: border-box;**

/*模态框*/
    .modal-box { 
    /*绝顶定位 相对于当前浏览器*/
    	position: fixed;
    	width: 20rem;
    	/*设置为白色背景 前期可以设置为其他颜色 方便观看*/
    	background-color: white;
    	top: 0;
    	left: 0;
    	margin-top: 8rem;
    	border-radius: 7px;
    	/*解决高度塌陷的问题*/
    	overflow: hidden;
    	/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
    	/*比如在fixed定位中，z-index100大小的会覆盖在50大小的上面*/
    	z-index: 111;
    	/*用display的话没有物理宽高 便于js控制*/
    	/*visibility: hidden;先不要加 否则浏览器不会显示出来，*/
    	/*visibility: hidden;*/
    }
    	
    /*小的模态框*/
    .modal-min { 
    	width: 15rem;
    }
    	
    /*大的模态框*/
    .modal-max { 
    	width: 40rem;
    }
    	
    /*模态框顶部*/
    .modal-box-top { 
    /*相对于之前自己的位置定位，这个设置不会影响元素的位置，会影响子元素使用absolute定位 先不管*/
    	position: relative;
    	/*宽度随父div*/
    	width: 100%;
    	height: 3rem;
    	/*边框线放在下面*/
    	border-bottom: 1px solid #cccccc;
    	padding: 0.5rem;
    	/*使用此属性后 元素宽高固定，边距大小会从原大小中减去，也就是设置边距后元素宽高不表*/
    	box-sizing: border-box;
    	overflow: hidden;
    }
    	
    /*模态框主体*/
    .modal-box-content { 
    	width: 100%;
    	height: 16rem;
    	padding: 0.5rem;
    	box-sizing: border-box;
    	overflow: hidden;
    }
    	
    /*模态框底部*/
    .modal-box-bottom { 
    	width: 100%;
    	height: 4rem;
    	border-top: 1px solid #cccccc;
    	padding: 0.5rem;
    	overflow: hidden;
    	box-sizing: border-box;
    }

这时候一个简单的模态框模型就做出了，然而还不行，上面的代码还没有添加顶部的标题和关闭按钮  
修改上面的HTML代码，给顶部添加一个标题和关闭按钮

<div class="modal-box">
    	
    	<div class="modal-box-top">
    		<div class="modal-box-title">标题</div>
    		
    		
    		<button onclick="modalClose()" class="modal-close">×
    		</button>
    	</div>
    	
    	<div class="modal-box-content">
    	</div>
    	
    	<div class="modal-box-bottom">
    	</div>
    </div>

添加css代码

/*模态框标题*/
    .modal-box-title { 
    	/*使用浮动此属性可写可不写 浮动元素都会变成块元素*/
        display: block;
        text-align: center;
        font-size: 1.3rem;
        /*右浮动*/
        float: left;
    }
    
    /*关闭按钮*/
    .modal-close { 
    	/*绝对定位，相对于 static 定位以外的第一个父元素进行定位*/
        position: absolute;
        /*定位在顶部的右侧*/
        top: 0;
        right: 0;
        height: 100%;
        width: 2.5rem;
        font-size: 1.5rem;
        background-color: white;
        color: #a5a5a5;
        /*outline: none;*/
    }

上面的关闭按钮使用了absolute定位，正好对应了前面顶部div使用了relative定位，  
上个效果图吧（覆盖层和位置是我用js实现了，后面会写）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]  
使用js来控制模态框的显示和隐藏（效果就是打开和关闭）  
给控件设置点击事件，比如给关闭按钮的点击事件执行 modalClose()函数  
还可以使用js来让模态框随浏览器大小变化而变化（自己实现吧 ）  
js代码：

//显示模态框
    function modalOpen() { 
    	//获取模态框对象 getElementsByClassName获取到的是一个数组对象
        let modal = document.getElementsByClassName("modal-box")[0];
        //获取浏览器当前宽高
        let documentWidth = window.innerWidth;
        let documentHeight = window.innerHeight;
        //获取模态框宽度
        let modalWidth = modal.offsetWidth;
        //模态框距离浏览器右侧的距离就是（浏览器宽度-模态框宽）/ 2.0
        //注意，需要把结果转为字符串类型
        modal.style.left = ((documentWidth - modalWidth) / 2.0).toString();
        //设置为可见
        modal.style.visibility = "visible";
    }
    
    //模态框关闭
    function modalClose() { 
    	//获取模态框
        let modal = document.getElementsByClassName("modal-box")[0];
        //设置为不可见
        modal.style.visibility = "hidden";
    }

到这里，一个模态框就做好了  
上一个我写的效果图（添加了内容和遮盖层）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190925063355167.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019092507325188.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190925074524420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM3MzIzOQ==,size_16,color_FFFFFF,t_70