Question

因此，我创建了一个网站，我决定只使用HTML，CSS和JS来创建模态类型表格。我按照该教程并完成了它。但是现在我被困住了……每次页面打开或重新加载，弹出模式对话框...我只希望在单击登录按钮时弹出它...有什么办法可以执行...任何帮助将不胜感激...这是代码< / p>

HTML：

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <!-- {% load static %} -->
    <link rel="shortcut icon" href="https://lh3.googleusercontent.com/a-/AOh14Gib1NYf2ZSICywbbqOUXh6laaEP1NJYCj18Mz-jBg=s96-c-rg-br100" type="image/jpg" />
    <link rel="stylesheet" href="../static/Css/home.css" />
    <script src="https://kit.fontawesome.com/fb5fc8c33b.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script defer src="../static/Js/home.js"></script>
</head>

<body>
    <nav>
        <ul>
            <li class="logo">
                <img src="../static/Images/Precious-san.jpg" />
            </li>
            <li class="responsive-bar"><span class="fas fa-bars"></span></li>
            <div class="nav-lists">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </div>
            <li class="search-box">
                <input type="search" placeholder="Search" autocomplete="off" />
                <label class="search-icon">
            <span class="fas fa-search"></span>
          </label>
            </li>
        </ul>
    </nav>
    <div class='losn'>
        <button id='login-btn' onclick='showLoginForm' ><a>Login</a></button>
        <p>or</p>
        <button id='signup-btn' >Sign up</button>
    </div>
    <div class='login-bg' >
        <div class='login-content' >
            <div class='close' onclick='hideLoginForm()' >+</div>
          <h3>Login</h3>
          <input type='email' placeholder='Email' id='email'><br>
          <input type='password' placeholder='Password' id='password'><br>
          <label for='show-password' >
            <input type='checkbox' id='show-password' onclick='showPassword()' > Show Password
          </label><br>
          <input type='submit' value='Login' id='submit'>
        </div>
    </div>
</body>

</html>

Css：

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/* Global Variables */

:root {
    --imperialred: #E63946;
    --honeydew: #F1FAEE;
    --powderblue: #A8DADC;
    --celadonblue: #457B9D;
    --prussianblue: #1D3557;
}


/* Css starts here */

* {
    margin: 0;
    border: 0;
/*     box-sizing: border-box; */
    font-family: 'Montserrat', sans-serif;
}

nav ul li img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

nav ul li.logo {
    flex: 1;
}

nav {
    background-color: var(--prussianblue);
    color: var(--honeydew);
    padding: 10px 40px 10px 70px;
    border-left: none;
    border-right: none;
}

nav ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

nav ul div.nav-lists {
    display: inline-flex;
    padding: 0 25px;
}

nav ul div li a {
    color: var(--honeydew);
    text-decoration: none;
    font-size: 18px;
    padding: 0 15px;
}

nav ul div li a:hover {
    color: var(--imperialred);
}

nav ul .search-box {
    height: 40px;
    width: 240px;
    display: flex;
    background-color: var(--imperialred);
    border-radius: 5px;
}

nav ul .search-box input {
    height: 100%;
    width: 200px;
    border: none;
    outline: none;
    border-radius: 5px 0 0 5px;
    padding: 0 10px;
    font-size: 16px;
}

nav ul .search-box .search-icon {
    height: 100%;
    width: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

nav ul .search-box .search-icon:hover {
    color: #000
}

nav ul .search-box .search-icon span {
    font-size: 18px;
}

nav ul .responsive-bar {
    font-size: 29px;
    display: none;
    flex: 1;
    padding: 0 40px;
}

nav ul .responsive-bar span {
    height: 42px;
    width: 42px;
    text-align: center;
    line-height: 42px;
    border-radius: 5px;
    cursor: pointer;
}

nav ul .responsive-bar span.show:before {
    content: '\f00d';
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    padding: 0 40px;
    z-index: -2;
}

.content .text {
    font-size: 40px;
    font-weight: 800;
    padding: 5px 0;
    color: #202020;
}

.content .p {
    font-size: 28px;
    font-weight: 600;
    color: #202020;
}
div.losn {
    position: sticky;
    top: 5px;
    display: grid;
    text-align: center;
    justify-content: flex-end;
    font-size:14px;
    margin: 5px;
}
div.losn button {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--honeydew);
    background-color: var(--prussianblue);
}

div.losn button:hover {
    color: var(--imperialred);
}

body {
    background-color: var(--powderblue)
}

div.login-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.login-content {
    width: 500px;
    height: 300px;
    background-color: var(--celadonblue);
    border-radius: 5px;
  display: grid;
  align-items: center;
  justify-content: center;
  position: relative;
}

div.login-content h3 {
  font-size: 30px;
  text-align: center;
  margin-top: 10px;
  color: var(--honeydew)
}
div.login-content input {
  outline: none;
  border: 1px solid var(--prussianblue);
  border-radius: 5px;
}

div.login-content #email, #password {
  height: 30px;
  width: 250px;
  padding-left: 10px;
}

div.login-content #email {
  margin-top: 30px;
}

div.login-content #submit {
  height: 30px;
  width: 100%;
  background: var(--honeydew);
  cursor: pointer;
  margin-bottom: 20px;
}
div.login-content #submit:hover {
  background-color: #EFEFEF;
}
div.login-content label {
  cursor: pointer;
  color: var(--honeydew)
}
div.close {
    position: absolute;
    top: 0;
    right: 13px;
    font-size: 40px;
    color: var(--honeydew);
    cursor: pointer;
    transform: rotate(45deg);
}
div.close:hover {
    color: var(--imperialred);
}
/* Responsive */

@media screen and (max-width: 896px) {
    nav {
        padding: 10px 40px 10px 0px;
    }
}

@media screen and (max-width: 826px) {
    nav ul li.responsive-bar {
        display: block;
        padding-left: 10px;
    }
    nav {
        z-index: 1;
        padding: 10px 40px 10px 0px;
    }
    nav .logo {
        display: none;
    }
    nav ul div.nav-lists {
        z-index: -1;
        position: fixed;
        top: -220px;
        width: 100%;
        background-color: var(--celadonblue);
        right: 0;
        display: inline-block;
        transition: top .4s;
    }
    nav ul div.nav-lists.show {
        top: 60px;
    }
    nav ul div.nav-lists li {
        text-align: center;
        line-height: 30px;
        margin: 30px 0;
    }
    nav ul div.nav-lists li a {
        font-size: 19px;
    }
    nav ul {
        padding: 0;
    }
}

@media screen and (max-width: 445px) {
    nav ul {
        flex-wrap: nowrap;
        padding: none;
    }
    nav ul li.search {
        width: 50vmin;
    }
    nav ul li input {
        width: 40vmin;
    }
    nav ul li .search-box {
        width: 10vmin;
    }
    nav ul li.responsive-bar {
        padding-left: 10px;
    }
}

JavaScript：

$('nav ul li.responsive-bar span').click(function() {
    $('nav ul div.nav-lists').toggleClass("show");
    $('nav ul li.responsive-bar span').toggleClass("show");
});


// Show password function

function showPassword() {
  let passwordType = document.getElementById("password");
  if (passwordType.type == "password") {
    passwordType.type = "text";
}
  else {
    passwordType.type = "password";
  }
}


// login form visibility function

document.querySelector('.close').addEventListener("click", function hideLoginForm() {
    document.querySelector('.login-bg').style.display = "none";
});

document.getElementById('login-btn').addEventListener("click", function showLoginForm() {
  document.querySelector('.login-bg').style.display = "flex";
});

Answer 1

步骤：1首先，您必须隐藏弹出模式

div.login-content {
   display: none;
}

第2步：如下所示删除CSS

div.login-bg {
   position: absolute;
   background: rgba(0, 0, 0, 0.7);
}

步骤3：使用javascript，我们将添加以下类

document.querySelector('.close').addEventListener("click", function hideLoginForm() {document.querySelector('.login-bg').classList.remove("login_transparent"); });


document.getElementById('login-btn').addEventListener("click", function showLoginForm() {  document.querySelector('.login-bg').classList.add("login_transparent"); });

第4步：根据您在javascript中添加的类添加样式

.login_transparent {
   position: absolute;
   background: rgba(0, 0, 0, 0.7);
}
.login_transparent .login-content {
   display: grid;
}

这是我的工作小提琴

https://jsfiddle.net/Rajkumar007/ovjruq32/

Answer 2

加载js时，您需要隐藏模式因此，在代码的开头添加document.querySelector('.login-bg').style.display = "none"; 。

    $('nav ul li.responsive-bar span').click(function() {
    $('nav ul div.nav-lists').toggleClass("show");
    $('nav ul li.responsive-bar span').toggleClass("show");
});

document.querySelector('.login-bg').style.display = "none"; //hide login-bg

// Show password function

function showPassword() {
  let passwordType = document.getElementById("password");
  if (passwordType.type == "password") {
    passwordType.type = "text";
}
  else {
    passwordType.type = "password";
  }
}


// login form visibility function

document.querySelector('.close').addEventListener("click", function hideLoginForm() {
    document.querySelector('.login-bg').style.display = "none";
});

document.getElementById('login-btn').addEventListener("click", function showLoginForm() {
  document.querySelector('.login-bg').style.display = "flex";
});

这是一个演示：https://jsfiddle.net/mbp49wa7/

打开页面后，有什么方法可以隐藏模式吗？

2 个答案: