Question 43385 in Html Question posted in
Some basic documentation can be found here.

Making a popup registration form – Html

I am attempting to create a popup regestratin form upon the click of my register button , but cannot seem to find a solid tutorial… If anyone could assist me in making basic popup with even a template, I would be very appreciative. im assuming im gonna have to use jquery in some capacity but really dont know where to start.

const username = document.getElementById('Username')
const password = document.getElementById('Password')
const form = document.getElementById('Form')
const errorElement = document.getElementById('error')

form.addEventListener ('submit', (e) => {
    let messages = []
    if(username.value === '' || username.value == null){
        messages.push('usename is required')
    }
    if (password.value.length <= 6){
        messages.push('Password must be longer than 6 characters')
    }
    if (password.value.length >= 20){
        messages.push('Password is too long')
    }
    if(password.value == 'password'){
        messages.push('Password cannot be password')
    }
    if (messages.length > 0){
        e.preventDefault()
        errorElement.innterText = messages.join(' , ')
    }
})
.main {
  padding: 0px 10px;
  width: 100%; /* Add this here */
}
body {
    font-family: "Lato", sans-serif;
}

.main-head {
    height: 150px;
    background: #FFF;
}

.sidenav {
    height: 100%;
    background-color: #000;
    overflow-x: hidden;
    padding-top: 20px;
    width: 100%;
}

.main {
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
}

@media screen and (max-width: 450px) {
    .login-form {
        margin-top: 10%;
    }

    .register-form {
        margin-top: 10%;
    }
}

@media screen and (min-width: 768px) {
    .sidenav {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
    }

    .login-form {
        margin-top: 80%;
    }

    .register-form {
        margin-top: 20%;
    }
}

.login-main-text {
    margin-top: 20%;
    padding: 60px;
    color: #fff;
}

.login-main-text h2 {
    font-weight: 300;
}

.btn-black {
    background-color: #000 !important;
    color: #fff;
}

.login-form {
  margin-top: 20%;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.btn {
  margin-top: 20px;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="sitestyle.css" rel="stylesheet" type="text/css">
<script src="sitescript.js"></script>
    <title>Chartcell</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="sidenav">
    <div class="login-main-text">
        <h2>Chartcel <br> Login Page </h2>
        <p>Login or register from here to upload your desired spreadsheet.</p>
    </div>
    <div class="main">
        <div class="col-md-6 col-sm-12">
            <div class="login-form">
                <form>
                    <div class="form-group">
                        <label>Username </label>
                        <input type="text" class="form-control" placeholder="Username">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-black">Login</button>
                    <button type="submit" class="btn btn-secondary"> Register</button>
                </form>
            </div>
        </div>
    </div>
Tags:

2

Answers


  1. 0

    I would suggest you check out bootstrap modal.

    I see you’re already using bootstrap (as you have it as a css). It has a ton of useful features and is one of the most used libraries out there.

    For making a "popup" (modal) window check out this link.

    PS: Bootstrap also has good documentation, and a lot of stuff has already been asked on SO, so you are likely to find answers quickly.

    Example from the linked page:

    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

    What’s really important here is the data-bs-toggle attribute in button (which tells bootstrap which modal window to show (you can have multiple windows/modals)). data-bs-toggle has to be equal to the id of the modal.

    Login or Signup to reply.
  2. 0

    A simple way to start is to check the mozilla docs and search for dialog popup.

    But to give a barebone example with a little explanation:

    <button onclick="showPopup()">show popup</button>
<div style="display: none;" id="popupbox"> I am a popup </div>

<script> 
  function showPopup() {
    document.getElementById("popupbox").style.display = "block"
  }
</script>

    The button triggers the function showPopup(). This function will change the display status of the popupbox div to block. This makes the onload invisible div visible.

    This example is pure HTML CSS JS. No jQuery needed for this simple example. This example also only makes a onload invisible element, visible on button click. So you can probably fiddle around with this and manage to show/hide it and make a form on it for registration. You can use css like bootstrap or own made css to position it over other content to make it look nice as well. Even if it is not displayed in this manner it should not interfere with anything behind it if you make it a center screen popup.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search