<div class="content-top">
? ? ? ? <button type="submit" class="open">增加</button>
? ? </div>
? ? <div class="model-box">
? ? ? ? <div class="content">
? ? ? ? ? ? <div class="title">
? ? ? ? ? ? ? ? <span>增加</span>
? ? ? ? ? ? ? ? <i class="close">×</i>
? ? ? ? ? ? </div>
? ? ? ? ? ? <form method="POST" action="/add" style="height: 250px;">
? ? ? ? ? ? ? ? <div class="form-input">
? ? ? ? ? ? ? ? ? ? <label for="username" >用戶名</label>
? ? ? ? ? ? ? ? ? ? <input type="text" name="username" value={{uh.username}}>{{ uh.username }}
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="form-input">
? ? ? ? ? ? ? ? ? ? <label for="username">密碼</label>
? ? ? ? ? ? ? ? ? ? <input type="password" name="password" value={{uh.password}}>{{ uh.password }}
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="form-input">
? ? ? ? ? ? ? ? ? ? <button type="submit">提交</button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </form>
? ? ? ? </div>
</div>

* {
? ?padding: 0;
? ?margin: 0;
}
.content-top button {
? ?/* 取消按鈕自帶的輪廓 */
? ?outline: 0;
? ?width: 100px;
? ?height: 40px;
? ?color: #409eff;
? ?/* 圓角屬性 */
? ?border-radius: 4px;
? ?border: 1px solid #b3d8ff;
? ?background-color: #ecf5ff;
? ?/* 過渡 */
? ?transition: all 0.3s;
? ?cursor: pointer;
}
.content-top button:hover {
? ?color: #fff;
? ?border-color: #409eff;
? ?background-color: #409eff;
}
.model-box button {
? ?/* 取消按鈕自帶的輪廓 */
? ?outline: 0;
? ?width: 100px;
? ?height: 40px;
? ?color: #409eff;
? ?/* 圓角屬性 */
? ?border-radius: 4px;
? ?border: 1px solid #b3d8ff;
? ?background-color: #ecf5ff;
? ?/* 過渡 */
? ?transition: all 0.3s;
? ?/* 鼠標變小手 */
? ?cursor: pointer;
}
.model-box button:hover {
? ?color: #fff;
? ?border-color: #409eff;
? ?background-color: #409eff;
}
/* 模態(tài)框 start */
.model-box {
? ?/* 隱藏模態(tài)框 */
? ?display: none;
? ?position: fixed;
? ?top: 50px;
? ?left: 80px;
? ?width: 100%;
}
.model-box .content {
? ?position: absolute;
? ?top: 5px;
? ?/* calc方法可以自動計算數(shù)值 */
? ?left: calc(50% - 210px);
? ?width: 420px;
? ?border-radius: 5px;
? ?padding: 0 20px;
? ?/* 盒子陰影 */
? ?box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
? ?background-color: #fff;
}
.model-box .content .title {
? ?/* 彈性布局 */
? ?display: flex;
? ?/* 讓子元素水平與兩端對齊 */
? ?justify-content: space-between;
? ?height: 60px;
? ?line-height: 60px;
? ?/* 鼠標移入呈現(xiàn)移動光標 */
? ?cursor: move;
}
.model-box .content .title span {
? ?font-size: 18px;
? ?color: #333;
}
.model-box .content .title i {
? ?/* i標簽?zāi)J是斜體 這個屬性可以變正 */
? ?font-style: normal;
? ?font-size: 24px;
? ?color: #909399;
? ?cursor: pointer;
}
/* 鼠標移入變色 */
.model-box .content .title i:hover {
? ?color: #409eff;
}
.model-box .content form .form-input {
? ?margin: 5px 0;
}
/* 因為label元素的for屬性和input元素id屬性設(shè)置了相同的屬性值 所以就可以通過label元素選中 輸入框 布局已完成 ?*/
.model-box .content form .form-input label {
? ?font-size: 14px;
? ?color: #606266;
? ?cursor: pointer;
}
.model-box .content form .form-input input {
? ?/* 取消輸入框默認的輪廓 */
? ?outline: 0;
? ?width: 100%;
? ?height: 30px;
? ?padding: 0 8px;
? ?margin-top: 12px;
? ?border: 1px solid #dcdfe6;
? ?border-radius: 4px;
}
.model-box .content form .form-input input:hover {
? ?border-color: #c0c4cc;
}
/* 輸入框獲取焦點變色 */
.model-box .content form .form-input input:focus {
? ?border-color: #409eff;
}
.model-box .content form .form-input button {
? ?/* 讓按鈕浮動到右側(cè) */
? ?float: right;
? ?margin-top: 10px;
}

// 添加頁面加載事件
window.addEventListener("load", () => {
?? ?// 獲取打開按鈕
?? ?const open = document.querySelector(".open");
?? ?// 獲取關(guān)閉按鈕
?? ?const close = document.querySelector(".close");
?? ?// 獲取整個大的模態(tài)框
?? ?const fillScreen = document.querySelector(".model-box");

?? ?// 獲取模態(tài)框可移動的頭部區(qū)域
?? ?const header = document.querySelector(".title");

?? ?// 獲取模態(tài)框珠主區(qū)域
?? ?const modelBox = document.querySelector(".content");

?? ?//element.addEventListener() 方法為指定元素添加事件句柄
?? ?// 打開功能
?? ?if(open){
?? ?open.addEventListener("click", () => {
?? ??? ?// 點擊打開按鈕 改變display屬性值
?? ??? ?fillScreen.style.display = "block";
?? ?});
? ?}

?? ?// 關(guān)閉功能
?? ?if(close){
?? ?close.addEventListener("click", () => {
?? ??? ?fillScreen.style.display = "none";
?? ?});
? ? }
?? ?// 移動功能 為header添加鼠標按下事件
?? ?if(header){
?? ?header.addEventListener("mousedown", (event) => {
?? ??? ?// 讓模態(tài)框移動 需要知道鼠標在header區(qū)域的光標位置 計算方式 是先算出鼠標光標在整個瀏覽器區(qū)域的位置 再算出模態(tài)框距離瀏覽器邊緣位置的大小 相減
?? ??? ?// event.pageX可以獲取鼠標光標距離瀏覽器邊緣位置的大小
?? ??? ?// modelBox.offsetLeft 可以獲取到模態(tài)框區(qū)里瀏覽器左邊框的距離
?? ??? ?const x = event.pageX - modelBox.offsetLeft;
?? ??? ?const y = event.pageY - modelBox.offsetTop;
?? ??? ?console.log(x, y);
?? ??? ?// 在按下事件內(nèi)添加移動事件
?? ??? ?document.addEventListener("mousemove", move);
?? ??? ?// 做鼠標彈起事件?
?? ??? ?function move(event) {
?? ??? ??? ?// 算出移動時的模態(tài)框的位置距離 并賦值 原理和上面求x,y一樣
?? ??? ??? ?// css屬性值需要單位?
?? ??? ??? ?modelBox.style.left = event.pageX - x + "px";
?? ??? ??? ?modelBox.style.top = event.pageY - y + "px";
?? ??? ?}
?? ??? ?//onmouseup 當松開鼠標按鈕時運行腳本 ? ?removeEventListener移除由 addEventListener() 方法添加的 "mousemove" 事件
?? ??? ?document.addEventListener("mouseup", () => {
?? ??? ??? ?document.removeEventListener("mousemove", move);
?? ??? ?});
?? ?});
}
});