Box/popup windows?

[Christjordan]

How can I make a model box with CSS and JavaScript?

[a_aramini]

did you mean “modal”?

like this?

or something else? Perhaps this:

Create A Modal

[Christjordan]

click on login button and open this pop.

[Christjordan]

@Christjordan

How can I make a model box with CSS and JavaScript?

My question is, How can I make a model box with CSS and JavaScript? not What is model box? please read 1st then reply.

[JohanRudolph75]

.modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    }
    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
    }
    .close-button {
        float: right;
        width: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        cursor: pointer;
        border-radius: 0.25rem;
        background-color: lightgray;
    }
    .close-button:hover {
        background-color: darkgray;
    }
    .show-modal {
        opacity: 1;
        visibility: visible;
        transform: scale(1.0);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    }

[a_aramini]

@Christjordan

@Christjordan

How can I make a model box with CSS and JavaScript?

My question is, How can I make a model box with CSS and JavaScript? not What is model box? please read 1st then reply.

We know how to read, thank you. However, until Elon Musk perfects and deploys Neuralink, we cannot read your mind .

I was just trying to clarify what you are referring to so we could better help you and not waste each other’s time by talking about different things (which apparently backfired, my apologies).

We are volunteers, students, members and users of the FCC community who are just trying to help. We don’t work for FCC, please be polite and mindful of that .

By the way, Welcome to the FCC Community!

I gave you a link, which I found by using google.

There’s lots, tons, of resources online if you know what to search. Please google first, then ask questions if there’s something specific that you don’t understand, and we will try our best to help you.

There’s the CSS box model:

CSS Box Model

Then there’s JS modal window pop-ups called alert, prompt and confirm, which popup a box similar to the pictures I posted above:

Alert, Confirm and Prompt Popup Boxes in JavaScript

Then there’s CSS modal box which greys out the background and brings focus to the popup box:

How TO - CSS/JS Modal

I was trying to figure out which one you wanted to make or know about.

[a_aramini]

@Christjordan

click on login button and open this pop.

So you want what’s called a Dropdown menu then?
That’s different than a modal.

Link:
How TO - Clickable Dropdown

[Christjordan]

Thank you so much for sharing helpful content.