<!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>
