1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

A new tool for you: Beautiful full screen modals

         

bakedjake

12:26 am on Jul 8, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Another tool I've been using recently are full screen modals. I was inspired by this project:

[github.com...]

I've found that they really help the user focus on their next action. They've very powerful when used for a call to action like a newsletter subscription.

birdbrain

6:38 pm on Jul 8, 2016 (gmt 0)



bakedjake,

what has this to do with CSS?

Everything on that link's "DEMO" only works with "JavaScript" enabled. :(

birdbrain

robzilla

8:35 am on Jul 9, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



They've very powerful when used for a call to action like a newsletter subscription.

Pop-ups were powerful, too. Many sites use this technique to gather e-mail addresses, often by asking you some silly question first, like "Would you like to learn the secret to losing weight?" with options such as "Yes!" and "No, I would rather stay fat" (I'm exaggerating, but not by a lot). It's often not clear what happens when you click either of them, or how to close the modal otherwise.

Very annoying. For navigation, however, as in the demo, I think it can be pretty good actually, so long as the animation doesn't take too long (the "Content Push" looks all right, but I would prefer a quick fade-in, or no animation at all).

bakedjake

5:20 pm on Jul 9, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I think there's a spectrum robzilla. Like marketing emails - some companies do it incredibly effectively and some companies do it terribly. Same with popups on websites. I mentioned in the other thread that the NY Times does a full screen modal on mobile for their social sharing button, and I thought it was elegant and useful.

robzilla

7:27 am on Jul 10, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



There's always a spectrum, but doing something effectively does not always equal a good user experience. Elegant and useful, that I can appreciate.

bakedjake

3:56 pm on Jul 11, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



what has this to do with CSS?

The modals are styled using CSS.

In the article linked from the demo, you can see the code they used: [tympanus.net...]

birdbrain

1:01 am on Jul 12, 2016 (gmt 0)



Hi there bakedjake,


The modals are styled using CSS.

"In the article linked from the demo,
you can see the code they used..."


Unfortunately, that is not entirely true.

They have not displayed the JavaScript code,
without which the demos do not work.

Here is a CSS only example for you to try... 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
 background: #f0f0f0;
 font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
 display: none;
 }

#r0:checked~#mask {
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 border: 0.625em solid #000;
 border-radius: 0;
 box-shadow: inset 0 0 2.5em #000;
 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
 }

#mask {
 position: fixed;
 z-index: 2;
 top: 50%;
 left: 50%;
 right: 50%;
 bottom: 50%;
 border-width: 0;
 border-radius: 50%;
 box-shadow: inset 0 0 0 #000;
 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
 background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
 overflow: hidden;
 transition: all 1.5s ease;
 }

#box { 
 position: relative;
 width: 20.5em;
 padding: 0.25em 1.5em 1em;
 border: 0.125em solid #000;
 border-radius: 0.625em;
 margin: 10% auto;
 background-color: #fff;
 background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
 text-align: center; 
 }

#overlay {
 display:block;
 width: 10em;
 line-height: 3em;
 margin:auto;
 border-radius: 0.75em;
 font-weight: bold;
 color: #fff;
 text-align: center;
 text-transform: uppercase;
 text-shadow: 0 0 0.1em #030;
 cursor: pointer;
 background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
 position: absolute;
 top: -1em;
 right: -0.875em;
 padding: 0.25em 0.5em;
 border-radius: 50%;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 background-color: #333;
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
 background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

not2easy

2:50 am on Jul 12, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



That is pretty awesome, birdbrain. This is tempting me to try out some modal styling, thanks!

birdbrain

9:15 am on Jul 12, 2016 (gmt 0)



Example 2 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
 background: #f0f0f0;
 font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
 display: none;
 }

#r0:checked~#mask {
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 border: 0.625em solid #000;
 border-radius: 0;
 box-shadow: inset 0 0 2.5em #000;
 transform: rotateZ(0deg); 
 }

#mask {
 position: fixed;
 z-index: 2;
 top: 50%;
 left: 50%;
 right: 50%;
 bottom: 50%;
 border-width: 0;
 border-radius: 50%;
 box-shadow: inset 0 0 0 #000;
 transform: rotateZ(360deg);
 background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
 overflow: hidden;
 transition: all 1.5s ease;
 }


#box { 
 position: relative;
 width: 20.5em;
 padding: 0.25em 1.5em 1em;
 border: 0.125em solid #000;
 border-radius: 0.625em;
 margin: 10% auto;
 background-color: #fff;
 background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
 text-align: center; 
 }

#overlay {
 display:block;
 width: 10em;
 line-height: 3em;
 margin:auto;
 border-radius: 0.75em;
 font-weight: bold;
 color: #fff;
 text-align: center;
 text-transform: uppercase;
 text-shadow: 0 0 0.1em #030;
 cursor: pointer;
 background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
 position: absolute;
 top: -1em;
 right: -0.875em;
 padding: 0.25em 0.5em;
 border-radius: 50%;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 background-color: #333;
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
 background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:16 am on Jul 12, 2016 (gmt 0)



Example 3 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
 background: #f0f0f0;
 font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
 display: none;
 }

#r0:checked~#mask {
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 border: 0.625em solid #000;
 box-shadow: inset 0 0 2.5em #000;
 transform: rotateY(0deg) ; 
 }

#mask {
 position: fixed;
 z-index: 2;
 top: 0;
 left: 50%;
 right: 50%;
 bottom: 0;
 border-width: 0;
 box-shadow: inset 0 0 0 #000;
 transform: rotateY(90deg);
 background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
 overflow: hidden;
 transition: all 1.5s ease;
 }


#box { 
 position: relative;
 width: 20.5em;
 padding: 0.25em 1.5em 1em;
 border: 0.125em solid #000;
 border-radius: 0.625em;
 margin: 10% auto;
 background-color: #fff;
 background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
 text-align: center; 
 }

#overlay {
 display:block;
 width: 10em;
 line-height: 3em;
 margin:auto;
 border-radius: 0.75em;
 font-weight: bold;
 color: #fff;
 text-align: center;
 text-transform: uppercase;
 text-shadow: 0 0 0.1em #030;
 cursor: pointer;
 background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
 position: absolute;
 top: -1em;
 right: -0.875em;
 padding: 0.25em 0.5em;
 border-radius: 50%;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 background-color: #333;
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
 background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:17 am on Jul 12, 2016 (gmt 0)



Example 4 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
  background: #f0f0f0;
  font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
  display: none;
 }

#r0:checked~#mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.625em solid #000;
  box-shadow: inset 0 0 2.5em #000;
  transform: rotateX(0deg);  
 }

#mask {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 50%;
  border-width: 0;
  box-shadow: inset 0 0 0 #000;
  transform: rotateX(90deg);
  background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
  overflow: hidden;
  transition: all 1.5s ease;
 }


#box { 
  position: relative;
  width: 20.5em;
  padding: 0.25em 1.5em 1em;
  border: 0.125em solid #000;
  border-radius: 0.625em;
  margin: 10% auto;
  background-color: #fff;
  background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
  text-align: center;  
 }

#overlay {
  display:block;
  width: 10em;
  line-height: 3em;
  margin:auto;
  border-radius: 0.75em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 0.1em #030;
  cursor: pointer;
  background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
  position: absolute;
  top: -1em;
  right: -0.875em;
  padding: 0.25em 0.5em;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background-color: #333;
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
  background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:18 am on Jul 12, 2016 (gmt 0)



Example 5 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
  background: #f0f0f0;
  font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
  display: none;
 }

#r0:checked~#mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.625em solid #000;
  box-shadow: inset 0 0 2.5em #000;
  
 }

#mask {
  position: fixed;
  z-index: 2;
  top: 0%;
  left: 0;
  right: 0;
  bottom: 100%;
  border-width: 0;
  box-shadow: inset 0 0 0 #000;
  background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
  overflow: hidden;
  transition: all 1.5s ease;
 }


#box { 
  position: relative;
  width: 20.5em;
  padding: 0.25em 1.5em 1em;
  border: 0.125em solid #000;
  border-radius: 0.625em;
  margin: 10% auto;
  background-color: #fff;
  background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
  text-align: center;  
 }

#overlay {
  display:block;
  width: 10em;
  line-height: 3em;
  margin:auto;
  border-radius: 0.75em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 0.1em #030;
  cursor: pointer;
  background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
  position: absolute;
  top: -1em;
  right: -0.875em;
  padding: 0.25em 0.5em;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background-color: #333;
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
  background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:19 am on Jul 12, 2016 (gmt 0)



Example 6 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
  background: #f0f0f0;
  font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
  display: none;
 }

#r0:checked~#mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.625em solid #000;
  box-shadow: inset 0 0 2.5em #000;
  
 }

#mask {
  position: fixed;
  z-index: 2;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  border-width: 0;
  box-shadow: inset 0 0 0 #000;
  background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
  overflow: hidden;
  transition: all 1.5s ease;
 }


#box { 
  position: relative;
  width: 20.5em;
  padding: 0.25em 1.5em 1em;
  border: 0.125em solid #000;
  border-radius: 0.625em;
  margin: 10% auto;
  background-color: #fff;
  background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
  text-align: center;  
 }

#overlay {
  display:block;
  width: 10em;
  line-height: 3em;
  margin:auto;
  border-radius: 0.75em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 0.1em #030;
  cursor: pointer;
  background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
  position: absolute;
  top: -1em;
  right: -0.875em;
  padding: 0.25em 0.5em;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background-color: #333;
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
  background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:20 am on Jul 12, 2016 (gmt 0)



Example 7 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
  background: #f0f0f0;
  font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
  display: none;
 }

#r0:checked~#mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.625em solid #000;
  box-shadow: inset 0 0 2.5em #000;
  opacity: 1; 
 }

#mask {
  position: fixed;
  z-index: 2;
  top: 100%;
  left: 100%;
  right: 0;
  bottom: 0;
  border-width: 0;
  box-shadow: inset 0 0 0 #000;
  background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
 }


#box { 
  position: relative;
  width: 20.5em;
  padding: 0.25em 1.5em 1em;
  border: 0.125em solid #000;
  border-radius: 0.625em;
  margin: 10% auto;
  background-color: #fff;
  background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
  text-align: center;  
 }

#overlay {
  display:block;
  width: 10em;
  line-height: 3em;
  margin:auto;
  border-radius: 0.75em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 0.1em #030;
  cursor: pointer;
  background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
  position: absolute;
  top: -1em;
  right: -0.875em;
  padding: 0.25em 0.5em;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background-color: #333;
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
  background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:20 am on Jul 12, 2016 (gmt 0)



Example 8 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
  background: #f0f0f0;
  font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
  display: none;
 }

#r0:checked~#mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.625em solid #000;
  box-shadow: inset 0 0 2.5em #000;
  opacity: 1; 
 }

#mask {
  position: fixed;
  z-index: 2;
  top: 100%;
  left: 0;
  right: 100%;;
  bottom: 0;
  border-width: 0;
  box-shadow: inset 0 0 0 #000;
  background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
 }


#box { 
  position: relative;
  width: 20.5em;
  padding: 0.25em 1.5em 1em;
  border: 0.125em solid #000;
  border-radius: 0.625em;
  margin: 10% auto;
  background-color: #fff;
  background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
  text-align: center;  
 }

#overlay {
  display:block;
  width: 10em;
  line-height: 3em;
  margin:auto;
  border-radius: 0.75em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 0.1em #030;
  cursor: pointer;
  background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
  position: absolute;
  top: -1em;
  right: -0.875em;
  padding: 0.25em 0.5em;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background-color: #333;
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
  background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:21 am on Jul 12, 2016 (gmt 0)



Example 9 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
  background: #f0f0f0;
  font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
  display: none;
 }

#r0:checked~#mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.625em solid #000;
  box-shadow: inset 0 0 2.5em #000;
  opacity: 1; 
 }

#mask {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 100%;
  border-width: 0;
  box-shadow: inset 0 0 0 #000;
  background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
 }


#box { 
  position: relative;
  width: 20.5em;
  padding: 0.25em 1.5em 1em;
  border: 0.125em solid #000;
  border-radius: 0.625em;
  margin: 10% auto;
  background-color: #fff;
  background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
  text-align: center;  
 }

#overlay {
  display:block;
  width: 10em;
  line-height: 3em;
  margin:auto;
  border-radius: 0.75em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 0.1em #030;
  cursor: pointer;
  background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
  position: absolute;
  top: -1em;
  right: -0.875em;
  padding: 0.25em 0.5em;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background-color: #333;
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
  background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:22 am on Jul 12, 2016 (gmt 0)



Example 10 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
  background: #f0f0f0;
  font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
  display: none;
 }

#r0:checked~#mask {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.625em solid #000;
  box-shadow: inset 0 0 2.5em #000;
  opacity: 1; 
 }

#mask {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 100%;
  right: 0;
  bottom: 100%;
  border-width: 0;
  box-shadow: inset 0 0 0 #000;
  background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
 }


#box { 
  position: relative;
  width: 20.5em;
  padding: 0.25em 1.5em 1em;
  border: 0.125em solid #000;
  border-radius: 0.625em;
  margin: 10% auto;
  background-color: #fff;
  background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
  text-align: center;  
 }

#overlay {
  display:block;
  width: 10em;
  line-height: 3em;
  margin:auto;
  border-radius: 0.75em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 0.1em #030;
  cursor: pointer;
  background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
  position: absolute;
  top: -1em;
  right: -0.875em;
  padding: 0.25em 0.5em;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background-color: #333;
  box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
  background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

tangor

3:33 am on Jul 13, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



modals by birdbrain, I sense a cottage industry out there!


(Thanks for sharing the ideas!)

birdbrain

8:13 am on Jul 13, 2016 (gmt 0)



Hi there tangor,

I sense a cottage industry out there!


Your senses mislead you. ;)

My extended posting was just an attempt to
keep "JavaScript" out of the "CSS" forum. :)

Unfortunately, it's probably doomed to failure though. :(

birdbrain

tangor

8:32 am on Jul 13, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I do appreciate that, birdbrain. I refrained from commenting on the OP because of the underlay of js. These days I truly strive to have NO js on my sites (the ones where I have the most love and INCOME based on in-house direct). Server side Perl continues to make me smile. :)

birdbrain

9:23 am on Jul 13, 2016 (gmt 0)



Example 11 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
 background: #f0f0f0;
 font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
 display: none;
 }

#r0:checked~#mask {
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 border: 0.625em solid #000;
 opacity: 1;
 box-shadow: inset 0 0 2.5em #000;
 transform: rotateY(0deg); 
 }

#mask {
 position: fixed;
 z-index: 2;
 top: 0%;
 left: 50%;
 right: 50%;
 bottom: 0%;
 border-width: 0;
 opacity: 0;
 box-shadow: inset 0 0 0 #000;
 transform: rotateY(90deg);
 background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
 overflow: hidden;
 transition: all 0.75s ease;
 }


#box { 
 position: relative;
 width: 20.5em;
 padding: 0.25em 1.5em 1em;
 border: 0.125em solid #000;
 border-radius: 0.625em;
 margin: 10% auto;
 background-color: #fff;
 background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
 text-align: center; 
 }

#overlay {
 display:block;
 width: 10em;
 line-height: 3em;
 margin:auto;
 border-radius: 0.75em;
 font-weight: bold;
 color: #fff;
 text-align: center;
 text-transform: uppercase;
 text-shadow: 0 0 0.1em #030;
 cursor: pointer;
 background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
 position: absolute;
 top: -1em;
 right: -0.875em;
 padding: 0.25em 0.5em;
 border-radius: 50%;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 background-color: #333;
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
 background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain

birdbrain

9:24 am on Jul 13, 2016 (gmt 0)



Example 12 


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS modal window</title>

<style media="screen">
body {
 background: #f0f0f0;
 font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }

#r0, #r1 {
 display: none;
 }

#r0:checked~#mask {
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 border: 0.625em solid #000;
 opacity: 1;
 box-shadow: inset 0 0 2.5em #000;
 transform: rotateX(0deg); 
 }

#mask {
 position: fixed;
 z-index: 2;
 top: 50%;
 left: 0%;
 right: 0%;
 bottom: 50%;
 border-width: 0;
 opacity: 0;
 box-shadow: inset 0 0 0 #000;
 transform: rotateX(90deg);
 background: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.9));
 overflow: hidden;
 transition: all 0.75s ease;
 }


#box { 
 position: relative;
 width: 20.5em;
 padding: 0.25em 1.5em 1em;
 border: 0.125em solid #000;
 border-radius: 0.625em;
 margin: 10% auto;
 background-color: #fff;
 background-image: linear-gradient(to bottom,#fff,#888);
 }

#box h2 {
 text-align: center; 
 }

#overlay {
 display:block;
 width: 10em;
 line-height: 3em;
 margin:auto;
 border-radius: 0.75em;
 font-weight: bold;
 color: #fff;
 text-align: center;
 text-transform: uppercase;
 text-shadow: 0 0 0.1em #030;
 cursor: pointer;
 background: linear-gradient(to bottom,rgba(0,127,0,0.3),rgba(0,127,0,0.7));
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close {
 position: absolute;
 top: -1em;
 right: -0.875em;
 padding: 0.25em 0.5em;
 border-radius: 50%;
 font-weight: bold;
 color: #fff;
 cursor: pointer;
 background-color: #333;
 box-shadow: 0.1em 0.1em 0.25em #000;
 }

#close:hover {
 background-color: #fc0000;
 }

</style>

</head>
<body>

<input id="r0" name="r" type="radio">
<input id="r1" name="r" type="radio">

<label id="overlay" for="r0">open overlay</label>

<div id="mask">

<div id="box">
 <label id="close" for="r1" title="Close" >X</label>
 <h2>NOTICE:</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
 bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
 posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
</p>
<!-- end #box --></div>

<!-- end #mask --></div>

</body>
</html>


birdbrain
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026