Простое модальное окно

Модальное окно фиксированной ширины, и всегда расположено по центру экрана не зависимо от размера окна просмотра. Содержание окна всегда будет показано в полном объёме, если указать новую ширину для свойства width.

CSS

Стили CSS для модального окна.

HTML

<div id="win">
   <div class="overlay"></div>
      <div class="visible">
        <h2>Заголовок окна</h2>
          <div class="content">
            <p>Содержание</p>
            <p>Модальное окно фиксированной ширины</p>
          </div>
        <button type="button" onClick="getElementById('win').style.display='none';">закрыть</button>
    </div>
</div>

Вызвать модальное окно кнопкой

Для вызова модального окна кнопкой нужно добавить стиль для элемента div с идентификатором win.

HTML

<div id="win" style="display:none;">

Кнопка для вызова модального окна

<button onClick="getElementById('win').removeAttribute('style');" type="button">Модальное окно</button>