Главная > Блог > Web-разработка > HTML и CSS >

Bootstrap 3. Компонент «Модальное окно»

19.02.2016

Теги: Bootstrap • CSS • HTML • JavaScript • Web-разработка • Верстка • Фреймворк

Компонент предназначен для отображения на странице изначально скрытого контента. При появлении по какому-либо событию, модальное окно затемняет всю страницу и отображается поверх остальных элементов. Окно представляет собой контейнер, который содержит заголовок, основное содержимое и подвал.

<p>
    <a class="btn btn-primary" role="button" data-toggle="modal" href="#modal-example">
        Ссылка с атрибутом href
    </a>
    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-example">
        Кнопка с атрибутом data-target
    </button>
</p>

<div class="modal fade" id="modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- заголовок -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Заголовок окна</h4>
            </div>
            <!-- содержимое -->
            <div class="modal-body">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
            </div>
            <!-- подвал -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">Сохранить</button>
            </div>
        </div>
    </div>
</div>

Большое и маленькое модальное окно:

<p>
    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-example-lg">
        Большое окно
    </button>
    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-example-sm">
        Маленькое окно
    </button>
</p>

<!-- Большое окно -->
<div class="modal fade" id="modal-example-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Заголовок окна</h4>
            </div>
            <div class="modal-body">
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Маленькое окно -->
<div class="modal fade" id="modal-example-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Заголовок окна</h4>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor
                incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
    </div>
</div>

Для того чтобы использовать сетку Bootstrap внутри модального окна, достаточно разместить в элементе с классом modal-body блок div с классом container-fluid.

Вызов модального окна можно привязать к кнопке или ссылке с помощью атрибутов data-toggle и data-target:

<a class="btn btn-primary" role="button" data-toggle="modal" href="#modal-example">
    Открыть окно
</a>

<button class="btn btn-primary" data-toggle="modal" data-target="#modal-example">
    Открыть окно
</button>

Вызвать модальное окно можно также с помощью JavaScript:

<!-- Кнопка, открывающая модальное окно -->
<a href="#" class="btn btn-primary" id="show-modal">Открыть модальное окно</a>
 
<!-- HTML-код модального окна-->
<div class="modal fade" id="modal-example" tabindex="-1" role="dialog">
    <!-- ..... -->
</div>

$(document).ready(function() {
    // при нажатии на кнопку #show-modal
    $('#show-modal').click(function() {
        // открыть модальное окно #modal-example
        $("#modal-example").modal('show');
    });
});

Чтобы убрать анимацию, которое сопровождает открытие модального окна, достаточно удалить у него класс fade.

Поиск: Bootstrap • CSS • HTML • JavaScript • Web-разработка • Верстка • Модальное окно • Фреймворк • Modal