I’ve been playing around on jsfiddle.net and whipped up a really stylish modal box using only CSS3,  no images, etc.  The icon can be changed out to any icon you want, especially if you stick with Pure CSS GUI Icons.  Well, enough talking, more coding!

Quick and Easy Modal Window

The HTML

Pretty Simple
[markdown]
“`html

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
“`
[/markdown]

The CSS

[markdown]
“`css3
.fancyModal {
position: relative;
width: 300px;

padding: 25px;
margin: 100px auto;

background: #f2f2f2; /* Old browsers */
background: -moz-linear-gradient(top, #f2f2f2 0%, #ffffff 18%, #f9f9f9 18%, #e1e1e1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(18%,#ffffff), color-stop(18%,#f9f9f9), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f2f2 0%,#ffffff 18%,#f9f9f9 18%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f2f2 0%,#ffffff 18%,#f9f9f9 18%,#e1e1e1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f2f2 0%,#ffffff 18%,#f9f9f9 18%,#e1e1e1 100%); /* IE10+ */
background: linear-gradient(top, #f2f2f2 0%,#ffffff 18%,#f9f9f9 18%,#e1e1e1 100%); /* W3C */

background-clip: padding-box;
border-radius: 9px;
border: 7px solid rgba(255,255,255,.3);
box-shadow: 0 5px 20px 10px rgba(0,0,0,.5); /*0 0 0 5px rgba(255,255,255,.3),*/

font: normal normal normal 12px helvetica, arial, sans-serif;
color: #777;
text-shadow: 1px 1px 0 #fff;
}
.fancyModal h3 {
font: normal normal bold 18px helvetica, arial, sans-serif;
color: #888;
margin: 5px 0 10px 0;
}

.errorSign {
display: block;
float: left;
height: 35px;
width: 35px;
margin: 0 10px 5px 0;

border: 3px solid #fff;
border-radius: 40px;

background: #aa0000; /* Old browsers */
background: -moz-linear-gradient(top, #aa0000 0%, #820000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aa0000), color-stop(100%,#820000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #aa0000 0%,#820000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #aa0000 0%,#820000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #aa0000 0%,#820000 100%); /* IE10+ */
background: linear-gradient(top, #aa0000 0%,#820000 100%); /* W3C */

background-clip: padding-box;
box-shadow: 0 3px 10px 0 rgba(50,50,50,.5);
}
.errorSign::before {
content: ”;
display: block;
width: 75%;
height: 20%;

background: #fff;
margin: 40% auto;
}

a.threeDee {
display: inline-block;
float: right;
padding: 5px 15px;
height: 15px;
margin: 0 0 5px 0; /* margin on bottom to avoid the jitters */

font: normal normal bold 15px helvetica;
text-decoration: none;
color: #777;
text-shadow: 1px 1px 1px #fff;

background: #f2f2f2; /* Old browsers */
background: -moz-linear-gradient(top, #f2f2f2 26%, #e8e8e8 26%, #d3d3d3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(26%,#f2f2f2), color-stop(26%,#e8e8e8), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f2f2 26%,#e8e8e8 26%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f2f2 26%,#e8e8e8 26%,#d3d3d3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f2f2f2 26%,#e8e8e8 26%,#d3d3d3 100%); /* IE10+ */
background: linear-gradient(top, #f2f2f2 26%,#e8e8e8 26%,#d3d3d3 100%); /* W3C */

border: 1px solid #dfdfdf;
border-radius: 5px;

box-shadow: 0 4px 0 0 #aaa, 0 5px 10px 0 rgba(50,50,50,.4), 0 5px 3px 0 #555;
}

a.threeDee:hover {
box-shadow: 0 3px 0 0 #aaa, 0 4px 8px 0 rgba(50,50,50,.4), 0 4px 3px 0 #555;
margin: 1px 0 4px 0; /* margin on bottom and top to avoid the jitters */
}

a.threeDee:active {
box-shadow: 0 0px 0 0 #aaa, 0 1px 4px 0 rgba(50,50,50,.4), 0 1px 3px 0 #555;
margin: 4px 0 1px 0; /* margin on bottom and top to avoid the jitters */
}
“`
[/markdown]
Thats pretty much it. I haven’t tested it on all the major browsers just the latest Chrome.

The JSFiddle is here: jsfiddle.net or you can demo it here

Button inspired by: Sergio Camalich