巩固基础--制作弹窗插件

目的：

1、复习css布局
2、练习基础js

需求分析：

1、浏览器自带的alert弹窗会阻碍程序运行，不友好
2、自己制作样式更美观

制作步骤：

第一部分：标签
由于只需要一个按钮控制是否弹窗
只需要一个按钮即可

<button>确认</button>

第二部分：
弹窗部分：
首先一个居中的弹窗
需要做到：
1、第一层：全局暗色且透明，中间为窗口
2、第二层：窗口 分为上中下三部分
3、第三层：窗口上：左右两部分，左边标题文字，右边关闭按钮
窗口中：文本框，协议类
窗口下：按钮部分，两个按钮，确定、取消
代码部分：

<div class="zhezhao">
    <div class="alert">
      <div class="head">
        <span class="title">协议声明</span>
        <span class="close">X</span>
      </div>
      <div class="main">
        <div class="mainHead">
          <a href=""></a>、<a href=""></a>、<a
            href="">
          <div class="mainText">
            <h2>小米商城用户协议</h2>
            <h3>版本日期：2018年12月18日</h3>
            <p>
             文本内容
            </p>
          </div>
        </div>
      </div>
      <div class="buttonList">
        <div class="btn1">确定</div>
        <div class="btn2">取消</div>
      </div>
    </div>
  </div>

* {
  margin: 0;
  padding: 0;
}

.zhezhao {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert {
  width: 800px;
  height: 600px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.alert .head {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-color: rgb(245, 245, 245);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head .title {
  padding-left: 20px;
  font-size: 20px;
}

.head .close {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  border-radius: 30px;
  margin-right: 13px;
  color: rgb(117, 117, 117);
  display: flex;
  justify-content: center;
  align-items: center;
}

.head .close:hover {
  cursor: pointer;
  background-color: red;
  color: white;
}

.main .mainHead {
  padding: 20px 40px;
  line-height: 1.5;
  font-size: 15px;
  text-align: justify;

}

.main .mainHead a {
  text-decoration: none;
  color: rgb(255, 103, 0);
}

.mainText {
  padding-top: 50px;
  width: 720px;
  height: 320px;
  margin: 0 auto;
  background-repeat: no-repeat;
  overflow-y: auto;
  text-align: justify;
}

.mainText h3 {
  text-align: right;

  font-weight: 500;
  font-size: 20px;
}

.buttonList {
  width: 100%;
  height: 100px;
  border-top: 3px solid rgb(234, 234, 234);
  background-color: rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonList .btn1 {
  width: 160px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: rgb(255, 103, 0);
  transition: background-color .3s;
  margin-right: 5px;
  color: white;
}

.buttonList .btn1:hover {
  cursor: pointer;
  background-color: rgb(242, 88, 7);
  transition: background-color .3s;
}

.buttonList .btn2 {
  width: 160px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: rgb(176, 176, 176);
  transition: background-color .3s;
  margin-left: 5px;
  color: white;
}

.buttonList .btn2:hover {
  cursor: pointer;
  background-color: rgb(117, 117, 117);
  transition: background-color .3s;
}

需要注意的是：采用弹性布局非常方便快速，
文本框为了显示滚动条，需要添加代码
overflow:auto;

let btn = document.querySelector("button");
    btn.onclick = function () {
      let zhezhao = document.createElement("div")
      zhezhao.className = "zhezhao";
      zhezhao.innerHTML = `刚才html代码复制进来`
      let body = document.querySelector("body").appendChild(zhezhao)
      let closeDiv = document.querySelector(".close").addEventListener("click", function () {
        document.querySelector("body").removeChild(zhezhao)
      })
    }

js需要注意的是，最后在查找元素绑定事件时，如果是想一行解决（例如代码块中的写法），需要在下一个移除事件时再查找一次body元素

---

如果需要制作封装方便随时调用：

基础思想

首先需要将代码放入函数中，思考有哪些地方需要自定义？
例如：标题、文本框、点击按钮后触发的事件函数
1、首先将代码封装进函数
2、需要传入一个值，这个值用来存放我们需要自定义的内容

function alert(args){
      let zhezhao = document.createElement("div")
      zhezhao.className = "zhezhao";
      zhezhao.innerHTML = `
      <div class="alert">
      <div class="head">
        <span class="title">`+args.title+`</span>
        <span class="close">X</span>
      </div>
      <div class="main">
       `+args.content+`
      </div>
    </div>`
      let body = document.querySelector("body").appendChild(zhezhao)
      let closeDiv = document.querySelector(".close").addEventListener("click", function () {
        document.querySelector("body").removeChild(zhezhao)
      })
    }

在html界面只需要调用起函数即可：

<button>确认</button>
<script>
let button = document.querySelector("button").addEventListener("click",function(
	alert({
		title:"",
		content:"",
	})
})
</script>

个人感觉有点像框架那味了
通过封装函数能大致知道框架是如何使用