Learn CSS:

10 CSS Popup Source Codes

Previous Tutorial Next Tutorial

Bootstrap Popup with Different Widths

Source
devanswer.com

Dependencies
-

Made With
HTML / CSS

Responsive
Yes

Description

In this code, we have three sizes of pop-ups, and by clicking on the three buttons, you can see each of these pop-ups.

Pure CSS Blue Popup

Source
devanswer.com

Dependencies
-

Made With
HTML / CSS

Responsive
Yes

Description

A pop-up with a blue theme and curved lines is provided in this code that you can use for free.

Bootstrap Image Preview Popup

Source
devanswer.com

Dependencies
Bootstrap

Made With
HTML / CSS / JS

Responsive
Yes

Description

There is a picture and text in this code. By clicking on the photo, the photo becomes full screen and it can be seen more clearly, and with the close button, the photo returns to its original size.

Show Popup with Page Scrolling Down

Source
devanswer.com

Dependencies
Bootstrap/Jquery

Made With
HTML / CSS / JS

Responsive
Yes

Description

In this code, there is a permanent long text that you have to scroll to see the whole text. Scrolling a pop-up will display the text in the lower right corner.

Sliding Down Popup Modal Code

Source
devanswer.com

Dependencies
Font-awesome

Made With
HTML / CSS

Responsive
Yes

Description

In this code, there is a permanent long text that you have to scroll to see the whole text. Scrolling a pop-up will display the text in the lower right corner.

Chat Window Popup

Source
devanswer.com

Dependencies
-

Made With
HTML / CSS / JS

Responsive
Yes

Description

In this code, we have a button that, when clicked, opens a chat window with the help of a pop-up. At the bottom of this window there is a button to close it.