Home Web Design CSS Popup In Pure CSS and HTML | Get Example With Source Code

Popup In Pure CSS and HTML | Get Example With Source Code

April 17, 2019

29243

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.

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.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Popup In Pure CSS | Webdevtrick.com</title>

</head>

<body>

<a class="button" href="#popup">Click Here For PopUp</a>

</div>

<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>

</div>

</body>

</html>

style.css

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

/* 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;
}

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.

4 COMMENTS

Stani June 24, 2019 At 1:41 pm

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

Reply
- shaan June 24, 2019 At 2:37 pm
  
  Us CSS @media query
  
  Reply
kelvin oyugi September 15, 2019 At 2:13 pm

Thank you Shaan. Just Las week I began my journey in programming and your articles are helping me alot to learn faster.

Reply
Fox July 19, 2020 At 3:43 pm

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?

Reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Popup Program Without Javascript

Popup In Pure CSS an HTML Programs Source Code

4 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY