<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>自定义模态</title> ???<style> ???????.cover { ???????????position: absolute; ???????????background-color: rgba(0, 0, 0, 0.4); ???????????top: 0; ???????????right: 0; ???????????left: 0; ???????????bottom: 0; ???????????z-index: 998; ???????} ???????.modal { ???????????height: 400px; ???????????width: 600px; ???????????background-color: white; ???????????position: absolute; ???????????top: 50%; ???????????left: 50%; ???????????margin-left: -300px; ???????????margin-top: -200px; ???????????z-index: 1000; ???????} ???????.hide { ???????????display: none; ???????} ???</style></head><body><button id="b1">屠龙宝刀,点击就送</button><button id="b2">油腻的师姐,在哪里</button><div class="cover hide"></div><div class="modal hide"> ???<form action=""> ???????<p> ???????????<label for="">用户名: ???????????????<input type="text"> ???????????</label> ???????</p> ???????<p> ???????????<label for="">密码: ???????????????<input type="password"> ???????????</label> ???????</p> ???????<p> ???????????<input type="submit" value="登录"> ???????????<input id="cancel" type="button" value="取消"> ???????</p> ???</form></div><script src="jquery-3.2.1.min.js"></script><script> ???//找出标签 ???$("#b1,#b2").click(function () { ???????//把cover和modal展示出来 ???????$(".cover").removeClass("hide"); ???????$(".modal").removeClass("hide"); ???}) ???$("#cancel").click(function () { ???????$(".cover").addClass("hide"); ???????$(".modal").addClass("hide"); ???})</script></body></html>
<jquery>基本的模态框
原文地址：https://www.cnblogs.com/shuimohei/p/10502736.html