Creating a pop-up window

HTML & CSS
1

I need a way for a user to click a button and that button will then open up a smaller pop-up window where the user can fill out a form, or edit certain information, and then save that information when finished, closing the window and returning to the main window. Is there a way to do something like this with html?

2

Not really. You’ll need JavaScript for the modal window (although this functionality is coming to HTML).

Once the user has filled out the form, you would normally send the info to a server-side script using Ajax. The script would validate the input and if all is good insert it into your DB. It would then send an indication of success or error back to the client to handle.

1 Like
3

Ah I see. Well I guess I’ll start looking more into Javascript then. Thanks for the help!

4

No worries.

5

Here is one I’m using. You can edit the html and css to your liking. This is pure CSS so you won’t need JavaScript.

HTML:

<a href="#example1" class="btn">Open modal</a>

<div class="lightbox" id="example1">
   <figure class="lightbox__body">
      <a href="#" class="lightbox__close-btn"></a>
      <figcaption class="lightbox__content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar.</p>
      </figcaption>
   </figure>
</div>

CSS:

body {
   padding: 40px;
   background: #efefef;
}

.btn {
   background: #24abf2;
   color: #fff;
   padding: 15px;
   font-weight: 700;
   display: inline-block;
   font-size: 14px;
   text-decoration: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.lightbox:target {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox__body {
    width: 400px;
    position: relative;
}

.lightbox__content {
    background: #fff;
    padding: 40px;
    border-radius: 2px;
    position: relative;
    
    p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6em;
        color: #444;
    }
}
.lightbox__close-btn::after {
    content: "Close";
    display: inline-block;
    position: absolute;
    right: -15px;
    top: -15px;
    z-index: 3;
    width: auto;
    height: 30px;
    cursor: pointer;
    background: #000;
    font-weight: 700;
    font-size: 11px;
    padding: 0 15px;
    line-height: 30px;
    color: #fff;
}

.lightbox__close-btn::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
}
2 Likes
6

Nicely done :slight_smile:

How does that actually work?

7

It uses the ::target pseudo class to target the modal and while it’s the target the display can be changed to block.

To close it you just target something else.

The problem with target is that the document scrolls to the target so you get a jump but generally this is fine for fixed modals.

2 Likes
8

Thanks, Paul :slight_smile:

1 Like
9

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