<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易模态框</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> /*我们先来把阴影层样式搞定,大小为全屏窗口,透明度调低一些,这样可以看到文本框的内容*/ .shadow { width: 100vw; height: 100vh; background-color: black; opacity: 0.4; top: 0; left: 0; position: fixed; display: none; /*先让他不显示，然后我们点击按钮显示*/ z-index: 6; } .change_pwd { width: 700px; height: 400px; background-color: white; position: fixed; top: 42px; left: 330px; z-index: 66; display: none; /*先让他不显示，然后我们点击按钮显示*/ } </style> </head> <body> <a href="#" class="dj">登陆(点击弹出模态框)</a> <div class="shadow"></div> <div class="change_pwd"> {% if oldpassword_is_wrong %} <div class="alert alert-error"> {# <button type="button" class="close" data-dismiss="alert">×</button>#} <h4>错误!</h4>原密码不正确 </div> {% endif %} <div class="well"> <form class="form-horizontal" action="" method="post"> {% csrf_token %} {{ form.as_p }} <p class="form-actions"> <input type="submit" value="确认修改" class="btn btn-primary"> <input type="submit" value="取消" class="cancel btn-primary"> </p> </form> </div> </div> <!--导入jquery--> <script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <script> // 点击修改密码，弹出已经被隐藏的修改表单 $(".dj").click(function () { $(".shadow").show(); $(".change_pwd").show(); }) //监视修改表单的 取消按钮，点击就将修改表单隐藏起来 //第二步，我们需要监视弹出框层的取消按钮，一点击就把模态框隐藏起来 $('.cancel').click(function () { $('.shadow').hide(); $('.frame').hide(); }); </script> </body> </html>