Модаль предупреждение / Окна / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Окна

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 83

Количество символов:

Посмотрели: 4066 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.4 / 5 - 9 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: бутстрап, окна, модаль, Bootstrap, Snippet, ModaL

Поделился: aTmpl

Добавлено: 2015-11-27 в 10:15

Метка: 1582178579

⇄ ⇅

<link href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript' src='https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.js'></script>
<style>
 .modal {
 padding-right: 0;
 background-color: rgba(2, 2, 2, 0.4);
 }
 
 .modal-dialog {
 top: 20%;
 width: 100%;
 position: absolute;
 }
 
 .modal-content {
 border-radius: 0;
 border: none;
 top: 40%;
 }
 
 .modal-body {
 background-color: #0f8845;
 color: #fff;
 }
</style>
<div class="container">
 <div class="row">
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Открыть Модаль</button>
 <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 <div class="modal-dialog modal-lg">
 <div class="modal-content">
 <div class="modal-body">
 <H2>Модальное окно</H2>
 <h4>Модальное окно для вывода дополнительной информации.</h4>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>