CODEWITHSUNDEEP
javascript
Preciousツ
Preciousツ

Reputation: 25

Is there any way I can hide my modal when the page is opened

So I was creating a website and I decided to make a modal type form using only Html, CSS, and js... I followed the tutorial and completed it..but now I am stuck...Every time the page opens or reloads, the modal pops up... I only want it to pop up when I click the login button ... Is there any way I can do this...any help would be appreciated...Here's the code

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";
});

Upvotes: 0

Views: 202

Answers (2)

Raj maxi
Raj maxi

Reputation: 88

Step: 1 First of all, you have to hide the pop up modal

div.login-content {
   display: none;
}

Step 2: Remove the CSS as below

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

Stpe 3: Using javascript we will add the class as follows

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"); });

Step 4: Add the Styles based on the class you have added in the javascript

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

Here is my working fiddle

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

Upvotes: 2

anehme
anehme

Reputation: 566

You need to hide the modal when js is loaded So add document.querySelector('.login-bg').style.display = "none"; at the beginning of your code.

    $('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";
});

and here is a demo : https://jsfiddle.net/mbp49wa7/

Upvotes: 1

Related Questions