本文实例为大家分享了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);
- }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。