first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/悬浮悬浮弹窗/Popups.js

@@ -0,0 +1,100 @@
+class Popups {
+    config = {
+        Name: $(".bj"),
+        contter: "标题",
+        iconfont: "警告",
+        neirong: "消息",
+        guanbi1: false,
+        weizhi: "RightTop",
+        iconfontEvent: () => { }
+
+    }
+
+    constructor(option) {
+        this.config.contter = option.contter || this.config.contter;
+        this.config.iconfont = option.iconfont || this.config.iconfont;
+        this.config.neirong = option.neirong || this.config.neirong;
+        this.config.weizhi = option.weizhi || this.config.weizhi;
+        this.config.guanbi1 = option.guanbi1 || this.config.guanbi1;
+        this.config.iconfontEvent = option.iconfontEvent || this.config.iconfontEvent;
+        console.log(option)
+        this.createPopups()
+    }
+
+    createPopups() {
+
+        this.config.Name.insertAdjacentHTML("beforeend",
+            `
+              <div class="back ${this.xuanzhe()}">
+                <div class="top">
+                <div class="top_left">
+                <i class="iconfont ${this.ibiaoq()}"></i>
+                <h4 class="contter">${this.config.contter}</h4>
+                </div>
+                <i class="iconfont icon-guanbi"></i>
+                </div>
+            <div class="neirong">${this.config.neirong}</div>
+                </div>`)
+
+        this.iconfontclous()
+        this.dingshi()
+
+    }
+
+
+    dingshi() {
+        if (this.config.guanbi1) {
+            setTimeout(() => this.clous(),3000)
+        }
+    }
+
+    /*关闭*/
+    clous() {
+        this.config.Name.removeChild($(".back"))
+    }
+
+    /*关闭按钮被点击时*/
+    iconfontclous() {
+        $(".icon-guanbi").onclick = () => {
+            this.clous();
+            this.config.iconfontEvent()
+        }
+    }
+    xuanzhe(shuju) {
+        switch (this.config.weizhi) {
+            case "LeftTop":
+                return shuju = "LeftTop";
+                break;
+            case "RightTop":
+                return shuju = "RightTop";
+                break;
+            case "LeftBottom":
+                return shuju = "LeftBottom";
+                break;
+            case "RightBottom":
+                return shuju = "RightBottom";
+                break;
+        }
+
+    }
+    ibiaoq(shu) {
+        switch (this.config.iconfont) {
+            case "警告":
+                return shu = "icon-icon-test";
+                break;
+            case "成功":
+                return shu = "icon-chenggong";
+                break;
+            case "错误":
+                return shu = "icon-icon-test1";
+                break;
+            case "消息":
+                return shu = "icon-xiaoxi";
+                break;
+        }
+
+    }
+   
+}
+
+window.Popups = Popups

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

@@ -0,0 +1,73 @@
+body, ul, li, p, h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 0;
+}
+.icon-xiaoxi{
+    padding-right: 10px;
+
+}
+.icon-icon-test1 {
+    color: red;
+    padding-right: 10px;
+}
+.iconfont{
+    font-size: 20px !important;
+
+}
+
+.icon-chenggong{
+    color: #00ff09;
+    padding-right: 10px;
+}
+.icon-icon-test {
+    color: yellow;
+    font-size: 20px;
+    padding-right: 10px;
+}
+
+.back {
+    width: 330px;
+    background: #ffff;
+    border: 1px solid #ebeef5;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 /10%);
+    padding: 14px 26px 14px 13px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    position: fixed;
+}
+.top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.top_left{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+.neirong{
+margin-left: 30px;
+    padding-top: 5px;
+}
+.bj{
+    width: 100vw;
+    overflow: hidden;
+}
+.LeftTop{
+    top:0;
+    left: 20px;
+}
+.RightTop{
+    top:0;
+    right: 20px;
+}
+.LeftBottom{
+    bottom: 50px;
+    left: 20px;
+}
+.RightBottom{
+    bottom: 50px;
+    right: 20px;
+}

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

@@ -0,0 +1,38 @@
+<!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_2631342_lyqjl0e3hf.css">
+</head>
+
+<body>
+    <button onclick="dian()">按钮</button>
+
+    <div class="bj"></div>
+
+</body>
+<script src="utils.js"></script>
+<script src="Popups.js"></script>
+<script>
+    function dian() {
+        new Popups({
+            Name: ("bj"),
+            contter: "这是标题",
+            iconfont: "成功", //警告(wait)，成功(success)，错误(error)，消息(default)
+            neirong: "这是内容",
+            guanbi1: false,
+            weizhi: "LeftTop", //LeftTop RightTop LeftBottom RightBottom
+            iconfontEvent: () => {
+                console.log("取消按钮被点击")
+
+            }
+
+        })
+
+    }
+</script>
+
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.23/悬浮悬浮弹窗/utils.js

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