堆棧內存溢出
  簡體   English   中英

顯示注冊表單時如何模糊登錄的背景？

[英]How do I blur login's background when the sign-up form is displayed?

 原文  2021-07-17 17:06:02  9   1    javascript/ html/ css

問題描述

我有兩個部分，一個用於登錄 (#login)，另一個用於注冊表單 (# id01)，當我單擊添加按鈕以訪問注冊表時，我希望背景 (#login) 變得模糊，如何我可以這樣做嗎，需要幫助嗎

這是html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
  rel="stylesheet"  href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="static\css\style1.css" />
<title>Login</title>
</head>

<body>
<section id="login">
  <div class="container login-container">
    <div class="row">
      <div class="col-md-6 login-form-1">
        <h3>Utilisateur</h3>
        <form>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="Votre mail *"
              value=""
            />
          </div>
          <div class="form-group">
            <input
              type="password"
              class="form-control"
              placeholder="Votre mot de passe *"
              value=""
            />
          </div>
          <div class="form-group">
            <input type="submit" class="btnSubmit" value="Connexion" />
          </div>
          <div class="form-group">
            <a href="#" class="ForgetPwd">Mot de passe oublier ?</a>
          </div>
        </form>
      </div>
      <div class="col-md-6 login-form-2">
        <div class="login-logo">
          <a
            onclick="document.getElementById('id01').style.display='block'"
            style="width: auto"
            ><span
              ><img src="static/images/signUp.png" alt="Inscrire" /></span
          ></a>
        </div>
        <h3>Admin</h3>
        <form>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="Votre mail *"
              value=""
            />
          </div>
          <div class="form-group">
            <input
              type="password"
              class="form-control"
              placeholder="Votre mot de passe *"
              value=""
            />
          </div>
          <div class="form-group">
            <input type="submit" class="btnSubmit" value="Connexion" />
          </div>
          <div class="form-group">
            <a href="#" class="ForgetPwd" value="Login"
              >Mot de passe oublier ?</a
            >
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
<section id="signup">
  <div id="id01" class="modal">
    <span
      onclick="document.getElementById('id01').style.display='none',document.getElementById('login').style.opacity=1"
      class="close"
      title="Close Modal"
      >&times;</span
    >
    <div
      class="signup-form"
      style="margin-left: auto; margin-right: auto; width: 500px"
    >
      <h3>S'inscrire</h3>
      <form>
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Nom *"
            value=""
          />
        </div>
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Prenom *"
            value=""
          />
        </div>
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Email *"
            value=""
          />
        </div>
        <div class="form-group">
          <input
            type="password"
            class="form-control"
            placeholder="Mot de passe *"
            value=""
          />
        </div>
        <div class="form-group">
          <input
            type="password"
            class="form-control"
            placeholder="Confirmation Mot de passe *"
            value=""
          />
        </div>
        <div class="form-group">
          <input type="submit" class="btnSubmit" value="Login" />
        </div>
      </form>
    </div>
  </div>
</section>
</body>

<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  crossorigin="anonymous"
></script>
<script    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  crossorigin="anonymous"
></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  crossorigin="anonymous"
></script>
</body>
</html>

js：

<script>
  // Get the modal
  var modal = document.getElementById("id01");

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };
</script>

css代碼：

.login-container {
margin-top: 5%;
margin-bottom: 5%}

.login-logo {
position: relative;
margin-left: -28.5%;}

.login-logo img {
position: absolute;
width: 25%;
margin-top: 19%;
background: #fff;
border-radius: 4.5rem;
padding: 5%;}
.login-form-1,.signup-form {
padding: 5%;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
background-color: #fff;}

.login-form-1 h3,.signup-form h3 {
text-align: center;
color: #333;}

.login-form-2 {
padding: 5%;
background: #0062cc;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);}

.login-form-2 h3 {
text-align: center;
color: #fff;}

.login-container form {
padding: 10%;}

.btnSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
border: none;
cursor: pointer;}

.login-form-1 .btnSubmit,.signup-form .btnSubmit {
font-weight: 600;
color: #fff;
background-color: #0062cc;}

.login-form-2 .btnSubmit {
font-weight: 600;
color: #0062cc;
background-color: #fff;}

.login-form-2 .ForgetPwd {
color: #fff;
font-weight: 600;
text-decoration: none;}

.login-form-1 .ForgetPwd {
color: #0062cc;
font-weight: 600;
text-decoration: none;}

span {
cursor: pointer;}

.container {
padding: 16px;}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
padding-top: 50px;}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;}

.close {
position: absolute;
right: 35px;
font-size: 40px;
font-weight: bold;
color: #888;}

.close:hover,.close:focus {
color: #f44336;
cursor: pointer;}

等待回復，謝謝！

1 個解決方案

解決方案1
 1  2021-07-17 17:19:02

添加一個事件偵聽器，用於click將filter: blur(5px)到登錄容器的模態開啟器錨點。

隱藏模態時，請確保將模糊設置回0px 。

演示： 

 // Get the modal var modal = document.getElementById("id01"); var c = document.querySelector('.login-container'); modalopener.addEventListener('click', function(){ c.style.filter = "blur(5px)"; }) window.onclick = function(event) { if (event.target == modal) { c.style.filter = "blur(0px)"; modal.style.display = "none"; } };
 .login-container { margin-top: 5%; margin-bottom: 5% } .login-logo { position: relative; margin-left: -28.5%; } .login-logo img { position: absolute; width: 25%; margin-top: 19%; background: #fff; border-radius: 4.5rem; padding: 5%; } .login-form-1, .signup-form { padding: 5%; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19); background-color: #fff; } .login-form-1 h3, .signup-form h3 { text-align: center; color: #333; } .login-form-2 { padding: 5%; background: #0062cc; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19); } .login-form-2 h3 { text-align: center; color: #fff; } .login-container form { padding: 10%; } .btnSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; border: none; cursor: pointer; } .login-form-1 .btnSubmit, .signup-form .btnSubmit { font-weight: 600; color: #fff; background-color: #0062cc; } .login-form-2 .btnSubmit { font-weight: 600; color: #0062cc; background-color: #fff; } .login-form-2 .ForgetPwd { color: #fff; font-weight: 600; text-decoration: none; } .login-form-1 .ForgetPwd { color: #0062cc; font-weight: 600; text-decoration: none; } span { cursor: pointer; } .container { padding: 16px; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; padding-top: 50px; } hr { border: 1px solid #f1f1f1; margin-bottom: 25px; } .close { position: absolute; right: 35px; font-size: 40px; font-weight: bold; color: #888; } .close:hover, .close:focus { color: #f44336; cursor: pointer; }
 <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> <link rel="stylesheet" href="static\\css\\style1.css" /> <title>Login</title> </head> <body> <section id="login"> <div class="container login-container"> <div class="row"> <div class="col-md-6 login-form-1"> <h3>Utilisateur</h3> <form> <div class="form-group"> <input type="text" class="form-control" placeholder="Votre mail *" value="" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Votre mot de passe *" value="" /> </div> <div class="form-group"> <input type="submit" class="btnSubmit" value="Connexion" /> </div> <div class="form-group"> <a href="#" class="ForgetPwd">Mot de passe oublier ?</a> </div> </form> </div> <div class="col-md-6 login-form-2"> <div class="login-logo"> <a onclick="document.getElementById('id01').style.display='block';" style="width: auto" id="modalopener"><span ><img src="static/images/signUp.png" alt="Inscrire" /></span ></a> </div> <h3>Admin</h3> <form> <div class="form-group"> <input type="text" class="form-control" placeholder="Votre mail *" value="" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Votre mot de passe *" value="" /> </div> <div class="form-group"> <input type="submit" class="btnSubmit" value="Connexion" /> </div> <div class="form-group"> <a href="#" class="ForgetPwd" value="Login">Mot de passe oublier ?</a > </div> </form> </div> </div> </div> </section> <section id="signup"> <div id="id01" class="modal"> <span onclick="document.getElementById('id01').style.display='none',document.getElementById('login').style.opacity=1" class="close" title="Close Modal" >&times;</span > <div class="signup-form" style="margin-left: auto; margin-right: auto; width: 500px" > <h3>S'inscrire</h3> <form> <div class="form-group"> <input type="text" class="form-control" placeholder="Nom *" value="" /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Prenom *" value="" /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Email *" value="" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Mot de passe *" value="" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Confirmation Mot de passe *" value="" /> </div> <div class="form-group"> <input type="submit" class="btnSubmit" value="Login" /> </div> </form> </div> </div> </section> </body> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous" ></script> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 React 登錄/注冊表單切換問題 注冊（傳遞散列）和登錄時，如何在數據庫中將密碼與散列密碼進行比較是在2個不同的javascript函數中？ 當用戶使用測試腳本在郵遞員中登錄/注冊時，無法將 JWT 令牌設置為環境變量？ 為使用 AWS（特別是 S3 存儲桶）托管的網站頁面創建注冊表單（類似於 mailchimp） 表單字段：如何更改模糊背景？ 當注冊是僅電子郵件登錄時如何自動測試用戶注冊 有沒有辦法可以將數據從注冊表單發送到另一個 HTML 頁面？ 如何在登錄/注冊表單之間切換？ 使用.toHaveBeenCalledWith的Jasmine測試失敗，用於注冊表單 根據下拉菜單更改注冊表格？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM