first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/弹窗封装/Dlogo.js

@@ -0,0 +1,121 @@
+class Dlogo {
+    config = {
+        body: this.$("body"),
+        title: "标题",
+        content: "内容",
+        showClose: false,//true表示显示，flase是关闭
+        cancelm: "取消",
+        confirmv: "确认",
+        AgainFatherlassName: '',
+        AgainCancelClassName: '', // 取消的类名
+        AgainConfirmClassName: '', // 确定的类名
+        beforeCloseType: null,
+        cancelEvent: () => {
+
+        },
+        confirmvEvent: () => {
+
+        }
+    };
+
+    constructor(option) {
+        this.config.title = option.title || this.config.title;
+        this.config.content = option.content || this.config.content;
+        this.config.showClose = option.showClose || this.config.showClose;
+        this.config.cancelm = option.cancelm || this.config.cancelm;
+        this.config.confirmv = option.confirmv || this.config.confirmv;
+        this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
+        this.config.confirmvEvent = option.confirmvEvent || this.config.confirmvEvent;
+        this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
+        this.createDlogo()
+        this.BindClose()
+        this.cancelClear()
+        this.showCloseClear()
+
+    }
+
+    createDlogo() {
+        this.config.body.insertAdjacentHTML("beforeend", `<div class="back ${this.config.AgainFatherlassName}">
+        <div class="backg"></div>
+        <div class="pop">
+            <div class="top">
+            <div class="title">${this.config.title}</div>
+           ${
+            this.config.showClose
+                ? `<i class="iconfont icon-guanbi"></i>`
+                : `<span></span>`
+        }
+            </div>
+            <div class="content">
+            ${this.config.content}
+            </div>
+            <div class="buttom">
+            <button class="cancel ${this.config.AgainCancelClassName}">${this.config.cancelm}</button>
+            <button class="confirm ${this.config.AgainConfirmClassName}">${this.config.confirmv}</button>
+            </div>
+        </div>
+        </div>`)
+    }
+
+    createdAgainConfirm() {
+        this.config.AgainFatherlassName = 'again'
+        this.config.AgainCancelClassName = "againCancel";
+        this.config.AgainConfirmClassName = "againConfirm";
+        this.config.title = ""
+        this.config.content = "确认关闭？"
+        this.config.cancelText = "取消"
+        this.config.confirmText = "确定"
+
+        this.createDlogo()
+        this.click(".againCancel", ()=> {
+            this.DeleteDlogo(".again");
+        })
+
+        this.click(".againConfirm", ()=> {
+            this.DeleteDlogo(".back");
+            this.DeleteDlogo(".again");
+        })
+    }
+
+    /*删除元素*/
+    DeleteDlogo(came) {
+        this.config.body.removeChild(this.$(came))
+    }
+
+    /*关闭按钮被点击*/
+    BindClose() {
+        this.click(".cancel", () => {
+            this.DeleteDlogo(".back");
+            this.DeleteDlogo();
+        })
+    }
+
+    /*确认按钮被点击*/
+    cancelClear() {
+        this.click(".confirm", () => {
+            this.config.confirmvEvent();
+            this.DeleteDlogo(".back");
+        })
+
+
+    }
+
+    /*标签按钮被点击*/
+    showCloseClear() {
+        this.click(".icon-guanbi",() =>{
+            this.DeleteDlogo(".back");
+            this.createdAgainConfirm()
+        })
+
+
+    }
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    click(className, methods) {
+        this.$(className).onclick = () => methods();
+    }
+}
+
+window.Dlogo = Dlogo

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/弹窗封装/index.css

@@ -0,0 +1,63 @@
+body,ul,li,p,h1,h2,h3,h4,h5,h6 {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+input {
+    outline: none;
+    border: none;
+    padding: 0;
+}
+.pop{
+    background:dodgerblue;
+    width: 420px;
+    border-radius:3px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.top{
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    padding: 20px 20px 10px;
+}
+.title{
+    font-size: 18px;
+}
+.content{
+    font-size: 14px;
+    padding: 30px 20px;
+}
+.buttom{
+    display: flex;
+    align-content: center;
+    justify-content: flex-end;
+    padding: 10px 20px 20px;
+}
+.buttom button{
+    padding: 12px 20px;
+    margin-right: 10px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+}
+.back{
+    width: 100vw;
+    height: 100vw;
+    position: relative;
+    box-sizing: border-box;
+}
+.backg{
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.4);
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/弹窗封装/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="./index.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2604059_7fkd3tbt2kd.css">
+</head>
+<body>
+<button class="op" onclick="Tchang()">点击显示</button>
+
+</body>
+<script src="Dlogo.js"></script>
+<!--<script src="tools.js"></script>-->
+<script>
+    function Tchang() {
+        new Dlogo({
+            title: "这是标题",
+            content: "这是内容",
+            showClose: true,//true表示显示，flase是关闭
+            cancelm: "取消按钮内容",
+            confirmv: "确认按钮内容",
+            cancelEvent: () => {
+                console.log("取消按钮被点击")
+            },
+            confirmvEvent: () => {
+                console.log("确定按钮被点击")
+            }
+        })
+    }
+</script>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/弹窗封装/tools.js

@@ -0,0 +1,3 @@
+function $(ClassName){
+    return document.querySelector(className);
+}