Welcome to WebmasterWorld Guest from 18.232.124.77

Forum Moderators: not2easy

Message Too Old, No Replies

A new tool for you: Beautiful full screen modals

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

Administrator from CA 

WebmasterWorld Administrator bakedjake is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 8, 2003
posts:3883
votes: 61


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.
6:38 pm on July 8, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


bakedjake,

what has this to do with CSS?

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

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

Senior Member

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

joined:Sept 25, 2005
posts:2091
votes: 370


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).
5:20 pm on July 9, 2016 (gmt 0)

Administrator from CA 

WebmasterWorld Administrator bakedjake is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 8, 2003
posts:3883
votes: 61


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.
7:27 am on July 10, 2016 (gmt 0)

Senior Member

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

joined:Sept 25, 2005
posts:2091
votes: 370


There's always a spectrum, but doing something effectively does not always equal a good user experience. Elegant and useful, that I can appreciate.
3:56 pm on July 11, 2016 (gmt 0)

Administrator from CA 

WebmasterWorld Administrator bakedjake is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 8, 2003
posts:3883
votes: 61


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...]
1:01 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
2:50 am on July 12, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4397
votes: 314


That is pretty awesome, birdbrain. This is tempting me to try out some modal styling, thanks!
9:15 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:16 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:17 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:18 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:19 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:20 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:20 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:21 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:22 am on July 12, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
3:33 am on July 13, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10140
votes: 1010


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


(Thanks for sharing the ideas!)
8:13 am on July 13, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
8:32 am on July 13, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10140
votes: 1010


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. :)
9:23 am on July 13, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
9:24 am on July 13, 2016 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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

Featured Threads

Free SEO Tools

Hire Expert Members