JS实现可复用弹窗插件的方法是什么
导读：这篇文章给大家介绍了“JS实现可复用弹窗插件的方法是什么”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“JS实现可复用弹窗插件的方法是什么”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一...
这篇文章给大家介绍了“JS实现可复用弹窗插件的方法是什么”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“JS实现可复用弹窗插件的方法是什么”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。本文实例为大家分享了javascript实现可复用弹窗插件的具体代码，供大家参考，具体内容如下
效果图
下面是详细代码
index.html
!doctype html>
html lang="en">
head>
meta charset="utf-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="x-ua-compatible" content="ie=edge">
title>
index/title>
link rel="stylesheet" href="./componet.css" >
/head>
body>
button id="button">
弹窗 /button>
script src="./componet.js">
/script>
script>
var btn = document.queryselector("#button");
btn.addeventlistener("click", function() {
new alertbox({
message: "哈哈哈哈哈哈",
success: "确认",
cancel: "取消",
successcallback: function() {
console.log("确认。。。。。。。。。")
}
,
cancelcallback: function() {
console.log("取消。。。。。。。。。。。")
}
}
);
}
)
/script>
/body>
/html>
componet.css
.alert-box{
width: 250px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -125px;
box-shadow: 0px 0px 10px 7px #ced6e0;
border-radius: 5px;
background-color: #ffffff;
}
.alert-box-message{
height:108px;
text-align: center;
line-height: 108px;
font-size: 14px;
}
.alert-box-buttonwrap{
height: 40px;
display: flex;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
.alert-box-button{
height: inherit;
text-align: center;
line-height: 40px;
flex:1;
cursor: pointer;
font-size: 14px;
background-color: white;
border-top: solid 1px #ced6e0;
transition: background-color 0.5s;
}
.alert-box-button:hover{
background-color: #dee1e6;
color: rgb(88, 88, 88);
}
.alert-box-button:nth-child(1){
border-right: solid 1px #ced6e0;
}
.alert-box-show{
-webkit-animation: alert-show 0.3s;
-webkit-animation-fill-mode: forwards;
animation: alert-show 0.3s;
animation-fill-mode: forwards;
}
.alert-box-hidden{
-webkit-animation: alert-hidden 0.3s;
-webkit-animation-fill-mode: forwards;
animation: alert-hidden 0.3s;
animation-fill-mode: forwards;
}
@keyframes alert-show{
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
@-webkit-keyframes alert-show{
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
@keyframes alert-hidden{
from{
transform: scale(1);
}
to{
transform: scale(0);
}
}
@-webkit-keyframes alert-hidden{
from{
transform: scale(1);
}
to{
transform: scale(0);
}
}
componet.js
function alertbox(options) {
this.message = options.message;
this.callback = options.callback;
this.success = options.success;
this.cancel = options.cancel;
this.successcallback = options.successcallback;
this.cancelcallback = options.cancelcallback;
this.createbox();
this.buttonaddevent();
}
alertbox.prototype.createbox = function() {
let body = document.getelementsbytagname("body")[0];
this.fragment = document.createdocumentfragment();
this.box = cre("div");
this.box.classlist.add("alert-box", "alert-box-show");
let message = cre("div");
message.textcontent = this.message;
message.classlist.add("alert-box-message");
this.box.appendchild(message);
let buttonwrap = cre("div");
buttonwrap.classlist.add("alert-box-buttonwrap");
this.successbtn = cre("div");
this.successbtn.classlist.add("alert-box-button");
this.successbtn.textcontent = this.success || "确认";
buttonwrap.appendchild(this.successbtn);
if (this.cancel) {
this.cancelbtn = cre("div");
this.cancelbtn.classlist.add("alert-box-button");
this.cancelbtn.textcontent = this.cancel;
buttonwrap.appendchild(this.cancelbtn);
}
this.box.appendchild(buttonwrap);
this.fragment.appendchild(this.box);
body.appendchild(this.fragment);
}
alertbox.prototype.buttonaddevent = function() {
this.successbtn.addeventlistener("click", () =>
{
let fn = this.successcallback;
fn();
this.box.classlist.add("alert-box-hidden");
settimeout(() =>
{
reme(this.box);
}
, 310)
}
);
if (this.cancel) {
this.cancelbtn.addeventlistener("click", () =>
{
let fn = this.cancelcallback;
fn();
this.box.classlist.add("alert-box-hidden");
settimeout(() =>
{
reme(this.box);
}
, 310)
}
);
}
}
function cre(element) {
return document.createelement(element);
}
function reme(element) {
document.body.removechild(element);
}
关于“JS实现可复用弹窗插件的方法是什么”的内容就介绍到这，感谢各位的阅读，相信大家对JS实现可复用弹窗插件的方法是什么已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： JS实现可复用弹窗插件的方法是什么
本文地址： https://pptw.com/jishu/654405.html