What is the code for Pop up?

HTML & CSS
1

For my one of the website , i want to design a sign up pop in CSS. How can i do it?

2

The following code is not working

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign Up Pop-up</title>
  <style>
    .popup {display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #ccc;padding:20px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,0.1);z-index:9999;}
    .close {position:absolute;top:10px;right:10px;cursor:pointer;}
    .overlay {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:999;}
  </style>
</head>
<body>

<button onclick="document.getElementById('popup').style.display='block';document.getElementById('overlay').style.display='block'">Sign Up</button>

<div class="popup" id="popup">
  <span class="close" onclick="document.getElementById('popup').style.display='none';document.getElementById('overlay').style.display='none'">&times;</span>
  <h2>Sign Up</h2>
  <form>
    <label>Email:</label><br>
    <input type="email" name="email"><br>
    <label>Password:</label><br>
    <input type="password" name="password"><br><br>
    <input type="submit" value="Submit">
  </form>
</div>

<div class="overlay" id="overlay"></div>

</body>
</html>
3

@onlineexam when you post code, you need to format it for the forums. Just put three backticks ``` on a separate line before and after your code. I have done it for you this time.

4

Define not working. For me, when I click on the button, I see a popup.

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.