Modal

by yong

HTML

<div class="modal-overlay" role="dialog">
    <div class="modal">
            <h3 class="modal-header">Lorem ipsum</h3>
        <div class="modal-content">
            Lorem ipsum dolor sit amet
        </div>
    </div>
</div>

CSS

body {
    font-family: Verdana;
    font-size: 13px;
}
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.5);
}
.modal {
    background: #fff;
    width: 95%;
    max-width: 500px;
    margin: 5% auto 5%;
    -webkit-box-shadow: 0px 0px 4px 0px #000; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    box-shadow: 0px 0px 4px 0px #000; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
}

.modal-header {
    color: #fff;
    padding: 15px 20px;
    background-color: #333333;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(##2E2E2E)); /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(top, #333333, ##2E2E2E); /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #333333, ##2E2E2E); /* Firefox 3.6-15 */
    background-image:      -o-linear-gradient(top, #333333, ##2E2E2E); /* Opera 11.10-12.00 */
    background-image:         linear-gradient(to bottom, #333333, ##2E2E2E); /* Firefox 16+, IE10, Opera 12.50+ */   
}
.modal-content {
    padding: 15px 20px;
}