作者：phper_liufan | 来源：互联网 | 2023-10-14 08:49
在做项目的过程中&＃xff0c;我们时常需要进行一些弹框操作&＃xff0c;比如在后台管理时需要进行的一些增删改操作&＃xff0c;这个时候我们需要使用到弹框&＃xff0c;或者在网站浏览时进行弹框输入&＃xff0c;博主也曾经在开发时使用一个个页面的方式&＃xff0c;但那样的前端效果不太美观&＃xff0c;今天&＃xff0c;闲来无事&＃xff0c;分享给大家自己写的一个前端的弹框demo&＃xff0c;话不多说&＃xff0c;直接上图&＃xff1a;
以下是相关代码&＃xff1a;
index.html
<!DOCTYPE html>
<html><head><meta charset&＃61;"utf-8"><title></title><link href&＃61;"css/index.css" rel&＃61;"stylesheet" type&＃61;"text/css"><script src&＃61;"js/index.js"></script></head><body><div class&＃61;"main"><button id&＃61;"btn_1"> 弹 框 输 入</button><div class&＃61;"form_1"><form ><div class&＃61;"input_1"><div class&＃61;"login_logo">用户登录</div><div class&＃61;"close">X</div></div><hr><div class&＃61;"input_1"><input type&＃61;"text" name&＃61;"user" placeholder&＃61;" 用户名"></div><div class&＃61;"input_1"><input type&＃61;"password" name&＃61;"password" placeholder&＃61;" 密码"></div><div class&＃61;"input_1"><input class&＃61;"submit_1" type&＃61;"submit" value&＃61;"提 交"></div></form></div></div><div class&＃61;"test"><h1>弹框登录&＃xff0c;输入文字&＃xff0c;可开发与后台交互&＃xff0c;直接用</h1></div><button id&＃61;"btn_2"> 弹 框 提 示</button><div class&＃61;"dialog"><div class&＃61;"title">恭喜&＃xff1a;操作成功 !</div><div class&＃61;"btn_2">确定</div><div class&＃61;"close_1">取消</div></div><div class&＃61;"test"><h1>弹框提示&＃xff0c;自行修改提示内容即可</h1></div></body>
</html>
index.css
body{margin: 0,0,0,0;overflow: hidden;
}
.main{margin: 0,0,0,0;overflow: hidden;
}
button{width:200px;height:60px;font-size: 25px;background-color:#21bf73 ;color: white;border:none;border-radius: 10px;}
.form_1{width:400px;height:300px;border:3px solid #f8f8f8;visibility: hidden;position: absolute;z-index: 999;opacity: 1;overflow: hidden;background-color: white;text-align: center;margin-top: 10%;margin-left: 35%;border-radius: 10px;
}
.open{visibility: visible;opacity: 1;
}
.input_1{margin-top: 15px;width:100%;height:40px;}
input{width:280px;height:30px;border-radius: 5px;border:1px solid #e5dfdf;
}
.input_1 .login_logo{text-align: left;font-size: 20px;font-weight: 300;padding-left: 30px;float: left;
}
.input_1 .close{width:20px;height:20px;color:#5d5d5d;text-align: center;line-height: 20px;border:1px solid #5d5d5d;border-radius: 50%;float: right;padding-top: 0px;margin-right: 10px;font-size: 12px;
}
.input_1 .close:hover{cursor:pointer;
}
hr{background-color: #F8F8F8;
}.input_1 .submit_1{border:2px solid #f88020;height:40px;background-color: white;
}
.input_1 .submit_1:hover{background-color: #f88020;color:white;
}
.test{overflow: hidden;
}
#btn_2{background-color: #F88020;
}
.dialog{width:300px;height:120px;border:2px solid #46b3e6;overflow: hidden;visibility: hidden;z-index: 999;overflow: hidden;opacity: 1;position: absolute;background-color: white;margin-top: 5%;margin-left: 40%;
}
.dialog .title{text-align: center;font-size: 20px;font-weight: 300;margin-top: 28px;margin-bottom: 25px;
}
.dialog .btn_2{width:50%;height:40px;float:left;background-color: #dff6f0;line-height: 40px;color: black;text-align: center;margin-bottom: 0px;
}
.dialog .btn_2:hover{background-color:#F88020 ;
}
.dialog .close_1{overflow: hidden;width:50%;height:40px;background-color: red;margin-bottom: 0px;line-height: 40px;color: white;text-align: center;
}
.dialog .close_1:hover{background-color: #f4f4f4;color:red;cursor: cell;
}
index.js
window.onload&＃61;function(){var btn_1&＃61;document.getElementById("btn_1");var btn_2&＃61;document.getElementById("btn_2");var close&＃61;document.getElementsByClassName("close");var close_1&＃61;document.getElementsByClassName("close_1");var dialog&＃61;document.getElementsByClassName("dialog");var form_1&＃61;document.getElementsByClassName("form_1");btn_1.addEventListener(&＃39;click&＃39;,function(){form_1[0].className&＃61;"form_1 open"; })close[0].addEventListener(&＃39;click&＃39;,function(){form_1[0].className&＃61;"form_1";})btn_2.addEventListener(&＃39;click&＃39;,function(){dialog[0].style.visibility&＃61;&＃39;visible&＃39;;})close_1[0].addEventListener(&＃39;click&＃39;,function(){dialog[0].style.visibility&＃61;&＃39;hidden&＃39;;})
}
大家可以自主对其进行修改哟&＃xff01;
京公网安备 11010802041100号