popup in pure css html

It is Possible to create a popup In pure CSS and HTML, Without JavaScript?

Every day on many websites you can see different types of popup for different types of purpose. Most of those popups are based on JavaScript or any JS framework like JQuery. Maybe most of peoples can’t imagine that creating a popup without javascript

Popups become very popular nowadays, Every website owner presents their main events to users through a popup. For example: Basically, the popup is used for email subscription form or any kind of deal show to the users. If you are using WordPress then you can get thousands of plugins for this. The popups created by plugins they also use javascript. But the challenge is creating it without JavaScript.

But today, our concept is to build a popup in pure CSS and HTML. I will show how to create a popup program without javascript only with HTML & CSS. If you think it will be a very basic looking popup program, then you are wrong. Because It has a very attractive look also.

Preview Of Popup Program Without Javascript

Let’s see a video preview of this program, then decide how it looks.

So, Now you can see how will this program look like. If you like this go for the source code. You can use it on your website also.

You May Also Like:

Popup In Pure CSS an HTML Programs Source Code

Before sharing source code, I want to say a little bit about this program. First, I created a button. When you click on button then the popup will appear. Then I created some divs for add text and images. I put an image URL on the div, not store image offline in the device. I had put one ID and use class on divs left.

I can’t explain fully in text form. When you will see the code, then you will understand easily the whole program. You have to create just 2 files for this program. One for HTML file and other for CSS file.

index.html

You have to create an HTML file named ‘index.html‘ and put these codes given here below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

That’s It. Now you have successfully created a popup in pure HTML and CSS. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

4 COMMENTS

  1. Great work, thank you, this helped me a lot.
    I have a question regarding the display on mobile devices:
    Is it possible to add/change the code so it is displayed properly on mobile devices?

    Thanks in advance for your answer and best regards

  2. Your site is full of extremely useful examples of code. If only I had found it sooner!

    With this popup example here, I was wondering if it is possible to have a next/previous button for when there is too much text to fit in the box? Would it work in a similar way to your Image Lightbox example, but rather than having the images in separate divs, have the text in separate divs?

LEAVE A REPLY

Please enter your comment!
Please enter your name here