<!-- Overlay/dialog -->
<div id="overlay" class="overlay">
<div id="myDialog" class="dialog">
<!-- Título del diálogo -->
<h1>Título del Diálogo</h1>
<!-- Cuerpo del diálogo -->
<div class="dialog-area">
<p>CUERPO</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget nunc urna. Morbi condimentum libero at diam fringilla lobortis. Ut quis sapien eros. In vel lacus et massa mattis molestie. Phasellus eu eros id eros luctus gravida ut non elit. In vitae dapibus dolor. Vivamus id quam tortor. Ut eu ultrices diam. Aliquam enim mauris, mattis sed ultricies vitae, aliquet ac purus. Nunc vel elit nisl, ut pharetra urna. Cras rutrum pulvinar congue. In hac habitasse platea dictumst.</p>
</div
<!-- Pie del diálogo -->
<div class="dialog-footer">
<div class="extensible">PIE con botones a la derecha sin float</div>
<input type="button" value="Botón1"/>
<input type="button" value="Botón2"/>
</div>
</div>
</div>
<!-- Sample page content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget nunc urna. Morbi condimentum libero at diam fringilla lobortis. Ut quis sapien eros. In vel lacus et massa mattis molestie. Phasellus eu eros id eros luctus gravida ut non elit. In vitae dapibus dolor. Vivamus id quam tortor. Ut eu ultrices diam. Aliquam enim mauris, mattis sed ultricies vitae, aliquet ac purus. Nunc vel elit nisl, ut pharetra urna. Cras rutrum pulvinar congue. In hac habitasse platea dictumst.</p>
<br/>
<p>In tempor ornare nulla, elementum imperdiet mi auctor vel. Vivamus dui justo, dignissim at vulputate eu, ullamcorper ac est. Sed et risus justo, ac adipiscing lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique neque vel sapien mattis porta. Praesent fringilla dapibus sapien eget cursus. Integer posuere imperdiet ante, non posuere tellus dapibus eu. In hac habitasse platea dictumst. Sed in risus vitae sem vestibulum pellentesque ac at nulla. Nunc ipsum ipsum, malesuada condimentum aliquet et, tristique et eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel pretium ligula.</p>
<br/>
<p>Suspendisse potenti. Aliquam vel odio eget mauris rutrum pretium ac non tortor. Proin ullamcorper dignissim turpis. Fusce pellentesque bibendum faucibus. Etiam pulvinar, sapien id suscipit egestas, enim nulla rutrum magna, vitae ornare lectus nisl non eros. Proin nec nisl turpis. Aenean feugiat, est nec accumsan imperdiet, sapien nibh convallis sapien, non aliquam nibh dui in neque. Donec aliquam, erat et congue varius, nulla est venenatis odio, nec tincidunt ante est in lacus. Sed vehicula eleifend felis vitae aliquam. Sed a orci odio, ut suscipit augue.</p>
<br/>
/* ================================================================================ */
/* Sample styles */
html {
font-family: arial;
}
/* Sample dialog styles */
#myDialog {
background-color: white;
margin-bottom: 6px;
margin-top: 6px;
width: 500px;
}
/* ================================================================================ */
/* Overlay/Dialog styles */
.overlay {
-webkit-transition: 0.25s opacity;
-moz-transition: 0.25s opacity;
-ms-transition: 0.25s opacity;
-o-transition: 0.25s opacity;
transition: 0.25s opacity;
background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -o-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
padding: 20px; padding-bottom: 130px;
z-index: 10;
}
.overlay .dialog {
-webkit-user-select: none;
-moz-user-select: none;
-webkit-box-shadow: 0px 5px 80px #505050;
-moz-box-shadow: 0px 5px 80px #505050;
-o-box-shadow: 0px 5px 80px #505050;
-ms-box-shadow: 0px 5px 80px #505050;
box-shadow: 0px 5px 80px #505050;
background: white;
border: 1px solid #BCC1D0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
position: relative;
min-width: 400px;
padding: 0;
}
/* Dialog heading */
.overlay .dialog h1 {
-webkit-padding-end: 24px; /* Specifies the space between an element's left or right border and its contents, depending on the writing direction */
-moz-padding-end: 24px;
-webkit-user-select: none;
-moz-user-select: none;
background: -webkit-linear-gradient(white, #F8F8F8);
background: -moz-linear-gradient(white, #F8F8F8);
background: -o-linear-gradient(white, #F8F8F8);
background: linear-gradient(white, #F8F8F8);
border-bottom: 1px solid rgba(188, 193, 208, .5);
padding: 10px 15px 8px 15px;
margin: 0;
font-size: 105%;
font-weight: bold;
color: #53637D;
text-shadow: white 0 1px 2px;
}
/* Dialog area */
.overlay .dialog .dialog-area {
-webkit-user-select: none;
-moz-user-select: none;
padding: 10px 15px;
}
/* Dialog footer */
.overlay .dialog .dialog-footer {
border-top: 1px solid rgba(188, 193, 208, .5);
padding: 12px;
}
/* ================================================================================ */
/* Flexible box model */
/* http://www.html5rocks.com/en/tutorials/flexbox/quick/ */
.overlay {
display: -webkit-box; /* Enables flexible box model */
-webkit-box-orient: horizontal; /* How should the box's children be aligned */
-webkit-box-pack: center; /* Sets the alignment of the box along the box-orient axis. . So if box-orient is horizontal it will chose how the box's children are aligned horizontally, and vice-versa. */
-webkit-box-align: center; /* Basically box-pack's brother property. Sets how the box's children are aligned in the box. If the orientation is horizontal it will decide the alignment vertically and vice-versa */
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.overlay .dialog .dialog-footer {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: end;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: end;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: end;
box-align: center;
}
.extensible {
-webkit-box-flex: 1; /* Float value. Extensible up to 1 (or value) times its width (or height depending on parent's orientation) */
-moz-box-flex: 1;
box-flex: 1;
}
/* ================================================================================ */
/* Chrome buttons */
button, input[type="button"], input[type="submit"] {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-user-select: none;
-moz-user-select: none;
background: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background: -o-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background: linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
border: 1px solid #AAA;
color: #444;
font-size: inherit;
margin-bottom: 0px;
min-width: 4em;
padding: 3px 12px 3px 12px;
}