How to Create a PopUp Edit Form With HTML CSS JS

How to make a PopUp Edit Form with HTML CSS JS – In the previous article I have reviewed about how to create a user data display. On this occasion I will share how to make an edit form float, fly (popup) without moving to a new page.

Read also: How to Create a Simple Table View Using HTML CSS

Because this review is a continuation of several previous articles, for those of you who don’t have the whole code, you can collect the code in the previous post. The first thing we’re going to do is assign an action button to the user data view table with the column name action . here’s the code:

User Data

No Username Full name Address Religion Gender Action
1 Violet Violet Evergarden Jl fatmawati no 5 Christian Woman
2 AF Alucard de franco Jl Mawar no 10 catholic Man
3 Miya Miya Jl goodness no 7 Islam Woman
4 Sun Sun MK Jl. Silk no. 1 Buddha Man
5 YSS Yisun sin Jl seven five no 9 Hindu Man

in the code above we only need to add the action column and the button code to display the edit button which we will display in the action column. Next we need the code for the edit user form which we will display as a popup. Here’s the code:


Data Input Form


next is to add js code. Here’s the code:

var userform = document.getElementById(‘edit-form-user’);

var btn = document.getElementById(“form-user”);

var span = document.getElementsByClassName(“close”)[0];

btn.onclick = function() { = “block”;

span.onclick = function() { = “none”;

window.onclick = function(event) {
if ( == user) { = “none”;

This js code plays an important role for the continuity of the normal user edit form display, in the edit user form display code, there are id = userform and class = edit-form-user. in this js code id and class are used to identify (key to get the edit user form code element),

In addition, there is the button code id, classname span, and some information about when the user clicks close, the user edit form is not displayed and when the user clicks on a page other than the user edit form, the user edit form will be closed. Put this js code above

.edit-content {
margin-left: 0px;
border-left: 0px solid gray;
overflow: hidden;
.edit-content form {
margin-left: 0px;
padding: 20px;
userform {
position: fixed;
display: none;
z-index: 1;
padding-top: 100px;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: auto;
background-color: #000;
background-color: rgba(0,0,0,0.4);
.user-content {
background-color: #fefefe;
margins: auto;
padding: 0px;
border: 1px solid #888;
width: 50%;
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
.close:focus {
colors: #000;
text-decoration: none;
cursors: pointers;
.user-headers {
padding: 5px;
background-color: #cdccfe;
color: white;
text-align: center;
.user-headers h2 {
margins: 0px;
padding: 10px;

Add the above css code to the style.css file:

There is an additional column display, namely the action column which contains the edit data button, if we click the button, the edit data form will appear.

How bro, it’s not too difficult, isn’t it to make the user data edit form display popup model, float. If something is missing, I’m waiting for your advice, friend.

That’s my review on how to make a popup edit form with html css js. Hopefully it can be useful, thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

Storage is Full