确认框是模态框的一种具体用途，非常常见也非常实用。
第一种是没有遮罩层的确认框
第二种是有遮罩层的确认框（并隐藏掉右边滚动条）
第二种确认框源码下载地址
https://gitee.com/island_tears/confirmation_box
使用说明
- 引入 confirm.js 和 confirm.css 文件。
- 使用前先实例化 confirm 对象。
- 在需要弹出确认框的时候，执行 confirm 实例的 show() 方法。
- show() 方法的参数为一个对象，该对象有两个属性，message 属性为确认框的提示信息，yes 属性为点击确认框确认按钮后执行的回调函数。
第一种实现的思路
1、把 confirm 的 position 属性设置成 fixed，让 confirm 基于窗口定位。
2、用 transform 属性使 confirm 在窗口内水平垂直居中。
3、通过 dispaly 属性控制 confirm 的显示和隐藏。
第二种实现的思路
1、confirm 有一个父元素 confirm-container ，设置 confirm-container 的 position 属性为 fixed，让 confirm-container 基于窗口定位。
2、confirm-container 设置成 flex 元素，并设置 widht : 100%、height : 100%、 justify-content : center 和 align-items : center ，这样 confirm 就基于窗口水平垂直居中。
3、confirm-container 通过 background-color: rgba(0,0,0,0.3); 可以设置透明的背景颜色。
4、确认框弹出的时候，判断有没有窗口滚动条，如果有则隐藏窗口滚动条，并向 body 添加一个大小为滚动条宽度的 margin-right ，这样网页元素不会向右移，使网页更加美观。
5、通过 dispaly 属性控制 confirm-container 的显示和隐藏。
我写代码的时候都是秉承着最大复用性原则，所以我写的代码大部分都是面向对象风格，因为是面向对象风格，所以就用ES6语法，因为用了ES6语法，所以不兼容IE浏览器。
如果确认框被其他元素遮住了，添加上 z-index 属性并增大该属性数值就可以了。
第一种代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
#confirm{
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 500px;
background: #EEEEEE;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
}
#confirm-header{
height: 30px;
position: relative;
}
#confirm-close{
height: 30px;
display: inline-block;
width: 30px;
line-height: 30px;
text-align: center;
font-size: 30px;
position: absolute;
right:0;
top:0;
}
#confirm-close:hover{
background-color: #666666;
color: white;
}
#confirm-main{
padding: 25px 10px;
text-align: center;
}
#confirm-footer{
height: 70px;
text-align: center;
}
#confirm-yes,#confirm-no{
border: none;
height: 40px;
width: 70px;
margin: 0 50px;
border-radius: 5px;
font-size: 18px;
}
#confirm-yes{
background-color: #FF6666;
color: white;
}
#confirm-yes:hover{
background-color: red;
}
#confirm-no:hover{
background-color: blue;
}
#confirm-yes:focus,#confirm-yes:active{
outline: none;
box-shadow:0 0 2px 4px #FF99FF;
}
#confirm-no{
background-color:#0069D9;
color: white;
}
#confirm-no:focus,#confirm-no:active{
outline: none;
box-shadow:0 0 2px 4px #77AADD;
}
</style>
</head>
<body>
<button id="test">点击</button>
</body>
<script>
window.onload = function(){
let confirm = new Confirm();//实例化 Confirm 对象。
document.getElementById("test").onclick = function () {
//在点击事件方法里执行 Confirm 对象的 show 方法。
confirm.show({
message:"确认删除吗？", //设置提示信息
yes:function () { //设置用户点击确认后执行的函数
alert("删除成功");
},
})
};
};
class Confirm {
constructor(){
//Confirm 对象的构造方法，在实例化对象时调用。
//利用 insertAdjacentHTML 方法在 body 标签内部末尾添加确认框的 html 代码。
document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend","<div id=\"confirm\">" +
" <div id=\"confirm-header\"><span id=\"confirm-close\">×</span></div>" +
" <p id=\"confirm-main\"></p>" +
" <div id=\"confirm-footer\">" +
" <button id=\"confirm-yes\">确认</button>" +
" <button id=\"confirm-no\">取消</button>" +
" </div>" +
" </div>");
//对象属性赋值。把 DOM 对象存进对象属性，避免多次操作 DOM，从而提高 Web 性能。
//为什么都用ID做标识符？
//1、一个网页里大概率只需要一个确认框，所以确认框在一个网页里是唯一的，因为是唯一的，所以用 ID 作标识符。
//2、ID 选择器比任何选择器都要快，所以在可以用 ID 选择器的情况下尽量用 ID 选择器，因为要使用 ID 选择器，所以用 ID 做标识符
this.confirm = document.getElementById("confirm");
this.confirmMain = document.getElementById("confirm-main");
this.confirmYes = document.getElementById("confirm-yes");
this.confirmNo = document.getElementById("confirm-no");
this.confirmClose = document.getElementById("confirm-close");
}
show(obj){
//show 方法，接受一个对象作为参数，该对象的 message 属性是提示信息，yes 属性是用户点击确认后执行的函数。
//该方法作用是控制确认框的显示和隐藏。
if(typeof obj !== "object"){
throw new TypeError("errorMessage");
}
if(typeof obj.message !== "string" && typeof obj.message !== "number"){
throw new TypeError("errorMessage");
}
if(typeof obj.yes !== "function"){
throw new TypeError("errorMessage");
}
this.confirmMain.innerHTML = obj.message; //设置确认框的提示信息。
const that = this; //保存指针。
this.confirmYes.onclick = function (){
//绑定点击事件。
//点确认后把确认框隐藏，并执行回调函数。
that.confirm.style.display = "none";
obj.yes();
};
this.confirmNo.onclick = function () {
//绑定点击事件。
//点取消后把确认框隐藏。
that.confirm.style.display = "none";
};
this.confirmClose.onclick = function () {
//绑定点击事件。
//点击关闭后把确认框隐藏。
that.confirm.style.display = "none";
};
//显示确认框。
this.confirm.style.display = "block";
}
}
</script>
</html>第二种源码
css文件
#confirm-container{
position: fixed;
left:0;
top:0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5); /* 最后的数字越少背景越透明 */
display: none;
justify-content: center;
align-items: center;
}
#confirm{
width: 500px;
background-color: white;
}
#confirm-header{
height: 30px;
position: relative;
}
#confirm-close{
height: 30px;
display: inline-block;
width: 30px;
line-height: 30px;
text-align: center;
font-size: 30px;
position: absolute;
right:0;
top:0;
}
#confirm-close:hover{
background-color: #666666;
color: white;
}
#confirm-main{
padding: 25px 10px;
text-align: center;
}
#confirm-footer{
height: 70px;
text-align: center;
}
#confirm-yes,#confirm-no{
border: none;
height: 40px;
width: 70px;
margin: 0 50px;
border-radius: 5px;
font-size: 18px;
}
#confirm-yes{
background-color: #FF6666;
color: white;
}
#confirm-yes:hover{
background-color: red;
}
#confirm-no:hover{
background-color: blue;
}
#confirm-yes:focus,#confirm-yes:active{
outline: none;
box-shadow:0 0 2px 4px #FF99FF;
}
#confirm-no{
background-color:#0069D9;
color: white;
}
#confirm-no:focus,#confirm-no:active{
outline: none;
box-shadow:0 0 2px 4px #77AADD;
}
js文件
class Confirm {
constructor(){
this.body = document.body; //获取 body 元素
this.isOpen = false;
this.style = window.getComputedStyle ? window.getComputedStyle(this.body, null) : this.body.currentStyle;//获取 body 元素的样式对象
//添加确认框的 Html 代码到 body 元素内部的末尾
this.body.insertAdjacentHTML("beforeend","<div id=\"confirm-container\">" +
" <div id=\"confirm\">" +
" <div id=\"confirm-header\"><span id=\"confirm-close\">×</span></div>" +
" <p id=\"confirm-main\"></p>" +
" <div id=\"confirm-footer\">" +
" <button id=\"confirm-yes\">确认</button>" +
" <button id=\"confirm-no\">取消</button>" +
" </div>" +
" </div>" +
" </div>");
this.confirmContainer = document.getElementById("confirm-container");
this.confirmMain = document.getElementById("confirm-main");
this.confirmYes = document.getElementById("confirm-yes");
this.confirmNo = document.getElementById("confirm-no");
this.confirmClose = document.getElementById("confirm-close");
//获取滚动条的宽度
this.body.insertAdjacentHTML("beforeend","<div id=\"_scrollWidth\" style=\"width: 50px;height: 50px;overflow: scroll;position: fixed;left: -50px;top:-50px\"></div>");
const scrollDiv = document.getElementById("_scrollWidth");
this.scrollWidth = scrollDiv.offsetHeight - scrollDiv.clientWidth;
scrollDiv.parentNode.removeChild(scrollDiv);
//绑定点击事件。
const that = this;
that.confirmYes.onclick = function (){
//设置点击事件。
// 1、把确认框隐藏。
// 2、恢复 body 的 overFlow 属性值
// 3、恢复 body 的 margin-right 属性值
that.confirmContainer.style.display = "none";
that.body.style.overflow = that.overFlow;
that.body.style.marginRight = that.marginRight;
that.isOpen = false; //弹出状态变为未弹出。
that.callBack(); //执行点击确认后的回调函数
};
that.confirmNo.onclick = function () {
that.confirmContainer.style.display = "none";
that.body.style.overflow = that.overFlow;
that.body.style.marginRight = that.marginRight;
that.isOpen = false;
};
that.confirmClose.onclick = function () {
that.confirmContainer.style.display = "none";
that.body.style.overflow = that.overFlow;
that.body.style.marginRight = that.marginRight;
that.isOpen = false;
};
that.confirmContainer.onclick = function(event){
event = event || window.event;
let target = event.target || event.srcElement;
if(target.id==="confirm-container"){
//判断点击事件的对象是不是遮罩层，是遮罩层才执行。
that.confirmContainer.style.display = "none";
that.body.style.overflow = that.overFlow;
that.body.style.marginRight = that.marginRight;
that.isOpen = false;
}
};
}
hasScrollbar(){
//判断是否有窗口滚动条
return this.style.overflow === "scroll" || (document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight));
}
show(obj){
if(this.isOpen === true){
//判断是否已经弹出确认框，如果已经弹出则不能再弹出。
return ;
}
if(typeof obj !== "object"){
throw new TypeError("errorMessage");
}
if(typeof obj.message !== "string" && typeof obj.message !== "number"){
throw new TypeError("errorMessage");
}
if(typeof obj.yes !== "function"){
throw new TypeError("errorMessage");
}
const that = this;// 保存 this 指针。
that.overFlow = that.style.overflow; 获取确认框弹出前 body 元素的 overflow 属性的值
that.marginRight = that.style.marginRight;//获取确认框弹出前 body 元素的 margin-right 属性的值
that.confirmMain.innerHTML = obj.message; //设置提示信息
that.callBack = obj.yes;//获取点击确认按钮后执行的回调函数。
that.confirmContainer.style.display = "flex"; //显示确认框
that.isOpen = true;//弹出状态变成已弹出。
if(this.hasScrollbar()===true){
//如果有窗口滚动条
that.body.style.overflow = "hidden"; //隐藏滚动条
// 在 body 元素右边加上一个大小为滚动条宽度的 margin-right。
that.body.style.marginRight = parseFloat(that.marginRight) + that.scrollWidth +"px";
}
}
}
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
