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.

index.html <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Popup In Pure CSS | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <a class="button" href="#popup">Click Here For PopUp</a> <div class="popup" id="popup"> <div class="popup-inner"> <div class="popupphoto"> <img src="https://images.pexels.com/photos/193349/pexels-photo-193349.jpeg?cs=srgb&dl=access-algorithm-binary-193349.jpg&fm" alt=""> </div> <div class="popuptext"> <h1>Pure CSS Pop-Up WebDevTrick</h1> <p>Webdevtrick is a blog for web designer and developers. We share example of simple web programs with source code. Simple programs make different this blog from others, because others share advanced program. And advance program maybe difficult for beginners. <a href="https://webdevtrick.com">Visit WebDevTrick</a></p> </div> <a class="closepopup" href="#">X</a> </div> </div> </div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 < ! DOCTYPE html > < ! -- code by webdevtrick ( https : //webdevtrick.com ) --> < html > < head > < meta charset = "UTF-8" > < title > Popup In Pure CSS | Webdevtrick . com < / title > < link rel = "stylesheet" href = "style.css" > < / head > < body > < div class = "container" > < a class = "button" href = "#popup" > Click Here For PopUp < / a > < div class = "popup" id = "popup" > < div class = "popup-inner" > < div class = "popupphoto" > < img src = "https://images.pexels.com/photos/193349/pexels-photo-193349.jpeg?cs=srgb&dl=access-algorithm-binary-193349.jpg&fm" alt = "" > < / div > < div class = "popuptext" > < h1 > Pure CSS Pop - Up WebDevTrick < / h1 > < p > Webdevtrick is a blog for web designer and developers . We share example of simple web programs with source code . Simple programs make different this blog from others , because others share advanced program . And advance program maybe difficult for beginners . < a href = "https://webdevtrick.com" > Visit WebDevTrick < / a > < / p > < / div > < a class = "closepopup" href = "#" > X < / a > < / div > < / div > < / div > < / body > < / html >

style.css

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

style.css /* code by webdevtrick ( https://webdevtrick.com ) */ @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext"); * { box-sizing: border-box; } html, body { font-family: 'Raleway', sans-serif; font-size: 16px; } @media screen and (max-width: 768px) { html, body { font-size: 12px; } } .container { background-color: #47BDFF; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } .button { text-decoration: none; font-size: .875rem; text-transform: uppercase; display: inline-block; border-radius: 1.5rem; background-color: #fff; color: #47BDFF; padding: 1rem 2rem; font-weight: 900; } .popup { display: flex; align-items: center; justify-content: center; position: fixed; width: 100vw; height: 100vh; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 2; visibility: hidden; opacity: 0; overflow: hiden; transition: .64s ease-in-out; } .popup-inner { position: relative; bottom: -100vw; right: -100vh; display: flex; align-items: center; max-width: 800px; max-height: 600px; width: 60%; height: 80%; background-color: #fff; transform: rotate(32deg); transition: .64s ease-in-out; } .popupphoto { display: flex; justify-content: flex-end; align-items: flex-end; width: 40%; height: 100%; overflow: hidden; } .popupphoto img { width: auto; height: 100%; } .popuptext { display: flex; flex-direction: column; justify-content: center; width: 60%; height: 100%; padding: 4rem; } .popuptext h1 { font-size: 2rem; font-weight: 600; margin-bottom: 2rem; text-transform: uppercase; color: #0A0A0A; } .popuptext p { font-size: .875rem; color: #686868; line-height: 1.5; } .popuptext a { text-decoration: none; color: #47BDFF; } .popup:target { visibility: visible; opacity: 1; } .popup:target .popup-inner { bottom: 0; right: 0; transform: rotate(0); } .closepopup { position: absolute; right: -1rem; top: -1rem; width: 3rem; height: 3rem; font-size: .875rem; font-weight: 300; border-radius: 100%; background-color: #47BDFF; z-index: 4; color: #fff; line-height: 3rem; text-align: center; cursor: pointer; text-decoration: none; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 /* code by webdevtrick ( https://webdevtrick.com ) */ @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext"); * { box-sizing : border-box ; } html, body { font-family : 'Raleway' , sans-serif ; font-size : 16px ; } @media screen and (max-width: 768px) { html, body { font-size : 12px ; } } .container { background-color : #47BDFF ; display : flex ; align-items : center ; justify-content : center ; width : 100vw ; height : 100vh ; } .button { text-decoration : none ; font-size : .875rem ; text-transform : uppercase ; display : inline-block ; border-radius : 1.5rem ; background-color : #fff ; color : #47BDFF ; padding : 1rem 2rem ; font-weight : 900 ; } .popup { display : flex ; align-items : center ; justify-content : center ; position : fixed ; width : 100vw ; height : 100vh ; bottom : 0 ; right : 0 ; background-color : rgba ( 0, 0, 0, 0.8 ) ; z-index : 2 ; visibility : hidden ; opacity : 0 ; overflow : hiden ; transition : .64s ease-in-out ; } .popup-inner { position : relative ; bottom : -100vw ; right : -100vh ; display : flex ; align-items : center ; max-width : 800px ; max-height : 600px ; width : 60% ; height : 80% ; background-color : #fff ; transform : rotate ( 32deg ) ; transition : .64s ease-in-out ; } .popupphoto { display : flex ; justify-content : flex-end ; align-items : flex-end ; width : 40% ; height : 100% ; overflow : hidden ; } .popupphoto img { width : auto ; height : 100% ; } .popuptext { display : flex ; flex-direction : column ; justify-content : center ; width : 60% ; height : 100% ; padding : 4rem ; } .popuptext h1 { font-size : 2rem ; font-weight : 600 ; margin-bottom : 2rem ; text-transform : uppercase ; color : #0A0A0A ; } .popuptext p { font-size : .875rem ; color : #686868 ; line-height : 1.5 ; } .popuptext a { text-decoration : none ; color : #47BDFF ; } .popup:target { visibility : visible ; opacity : 1 ; } .popup:target .popup-inner { bottom : 0 ; right : 0 ; transform : rotate ( 0 ) ; } .closepopup { position : absolute ; right : -1rem ; top : -1rem ; width : 3rem ; height : 3rem ; font-size : .875rem ; font-weight : 300 ; border-radius : 100% ; background-color : #47BDFF ; z-index : 4 ; color : #fff ; line-height : 3rem ; text-align : center ; cursor : pointer ; text-decoration : none ; }

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.