Modal windows

Create modal dialogs with an overlay, a dialog and a close button.

Usage

To apply this feature, add the .modal class to a block element.

Example

Show Source

<div class="modal" id="modal-1">
This is a modal overlay using only CSS...
<a class="css-close-button" href="#header"> </a>
</div>

Close button

To apply a close button, add the .css-close-button class to a <a> element with attribute href="#header" inside the modal window block.

Modal with header and footer

You can create a header and footer for your modal, which are seperated from the content. Just add the .modal-header or the .modal-footer class to a <div> element inside the modal dialog.

Example

Show Source

<div class="modal" id="modal-2">
<div class="modal-header">
<h2>Headline Text</h2>
</div>
<p>Your text here...</p>
<div class="modal-footer align-right">
<button class="css-button" type="button">Cancel</button>
<button class="css-button active" type="button">OK</button>
</div>
<a class="css-close-button" href="#header"> </a>
</div>

Large dialog width and height modifier

To apply the site's container width to the modal dialog, just add the .modal-wide class and(or) class .modal-tall if you have a lot of context inside.

Example

Show Source

<div class="modal modal-wide" id="modal-3">
<div class="modal-header align-center">
<h2>Headline Text</h2>
</div>
<p>Your text here...</p>
<div class="modal-footer align-center">
<button class="css-button" type="button">Cancel</button>
<button class="css-button active" type="button">OK</button>
</div>
<a class="css-close-button" href="#header"> </a>
</div>

Markup

<div class="modal" id="modal-1">
<p>...</p>
<a class="css-close-button" href="#header"> </a>
</div>