Modaal / Улучшение / Плагины Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v0.3.1

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4

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

Язык: Английский

Вес файла: 941.0 Kb

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

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

Скачать бесплатно

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

Скачали бесплатно: 56 раз

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

Рейтинг: 5.0 / 5 - 1 голосов

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

Авторство: https://github.com/humaan/Modaal

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

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

Теги: Responsive, ModaL, Plugin, Bootstrap

Поделился: BootstrapТема

Добавлено: 2017-03-29 в 09:58

Метка: 1588861732

⇄ ⇅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2017/modaal/modaal.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/modaal/modaal.min.js"></script>

<style>
/* style button */
.btn {
display: inline-block;
border: none;
border-radius: .3em;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 -0.25em 0 rgba(0, 0, 0, 0.25), 0 0.25em 0.25em rgba(0, 0, 0, 0.05);
cursor: pointer;
font-weight: 300;
line-height: 1.5;
letter-spacing: 1px;
padding: .5em 1.5em .75em;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; 
}
.btn:active {
outline: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 0.25em 0.5em rgba(0, 0, 0, 0.05);
margin-top: .25em;
padding-bottom: .5em; 
}
</style>

<div class="container"><div class="row"><div class="col-xs-12">

<a href="https://bootstraptema.ru/" class="btn btn-lg btn-success btn-block iframe">Открыть модаль</a>

</div></div></div>

<script>
$('.iframe').modaal({
 type: 'iframe',
 width: 1027,
 height: 768
});
</script>