在网页中,时常会用到模态框,比如:用bootstrap库中的模态框效果
一个模态框大致分为三个部分,顶部、主体部分和底部,这三个部分放在同一个div(盒子)中
- 顶部
顶部主要放标题,和关闭按钮(顶部右上角是个按钮,可以换别的 但是按钮有点击效果),非必须。 - 主体
用来存放主要控件,比如你要使用模态框做登录,那么登录主体控件(输入框、提示)就放在主体部分。 - 底部
底部主要用来放一些按钮,比如关闭按钮、确定按钮等,按钮大小位置都可以自己决定。非必须。
为了方便理解,就先写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实现了,后面会写)
使用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";
}
到这里,一个模态框就做好了
上一个我写的效果图(添加了内容和遮盖层)
更多推荐
制作一个简单的HTML模态框
发布评论