Модальное окно Bootstrap
При нажатии на кнопку появляется модальное окно в виде alert, с информацией о которой нужно предупредить посетителя, готовый HTML код для Bootstrap 3..
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified jаvascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type='text/jаvascript' src='https://code.jquery.com/jquery-1.10.1.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>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
admin
Автор15-10-2020, 21:32
ДатаМодальное окно / Bootstrap сниппеты
Категория- Комментариев: 0
- Просмотров: 428
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Комментарии
Сколько часов ,Вы проводите за компьютером