<!-- Кнопка, вызывающее модальное окно -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Модальное окно</a>
<!-- Скрипт, привязывающий событие click, открывающее модальное окно, к элементам, имеющим класс .btn -->
<script>
$(document).ready(function(){
//при нажатию на любую кнопку, имеющую класс .btn
$(".btn").click(function() {
//открыть модальное окно с id="myModal"
$("#myModal").modal('show');
});
});
</script>
<!-- HTML-код модального окна -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Мы это сделали</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
bootstrap 3 модальное окно ….
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<!-- Кнопка, вызывающее модальное окно -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Модальное окно</a>
<!-- HTML-код модального окна -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Мы это сделали</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
Содержимое нашего адаптивного модального окна ….
</div>
<!-- Футер модального окна -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<!-- Скрипт, привязывающий событие click, открывающее модальное окно, к элементам, имеющим класс .btn -->
<script>
$(document).ready(function(){
//при нажатию на любую кнопку, имеющую класс .btn
$(".btn").click(function() {
//открыть модальное окно с id="myModal"
$("#myModal").modal('show');
});
});
</script>
/* Разноцветные полоски в форме входа */
.colorgraph {
height: 5px;
border-top: 0;
background: #c4e17f;
border-radius: 5px;
background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}
<form role="form">
<fieldset>
<hr class="colorgraph">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email адрес">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Пароль">
</div>
<a href="" class="btn btn-link pull-right">Забыли пароль?</a><br />
<hr class="colorgraph">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Вход">
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="" class="btn btn-lg btn-primary btn-block">Регистрация</a>
</div>
</div>
</fieldset>
</form>
<!-- Кнопка, вызывающее модальное окно -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Форма входа</a>
<!-- HTML-код модального окна -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Форма входа</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
<!-- Форма входа -->
<form role="form">
<fieldset>
<hr class="colorgraph">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email адрес">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Пароль">
</div>
<a href="" class="btn btn-link pull-right">Забыли пароль?</a><br />
<hr class="colorgraph">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Вход">
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<a href="" class="btn btn-lg btn-primary btn-block">Регистрация</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- Скрипт, привязывающий событие click, открывающее модальное окно, к элементам, имеющим класс .btn -->
<script>
$(document).ready(function(){
//при нажатию на любую кнопку, имеющую класс .btn
$(".btn").click(function() {
//открыть модальное окно с id="myModal"
$("#myModal").modal('show');
});
});
</script>
Рубрика: Bootstrap 3