В этой статье мы рассмотрим, как сделать адаптивное модальное всплывающее окно полной ширины с помощью начальной загрузки Twitter. Это одна из последних тенденций в веб-дизайне, с которой я сталкивался несколько раз, и мне она показалась очень привлекательной. Вы можете увидеть хороший пример этого здесь, и это делается с помощью простых медиа-запросов css3, переходов и HTML5. Итак, я собираюсь объяснить, как этого можно легко добиться с помощью модальных всплывающих окон Twitter. В случае, если вы хотите быстро открыть свой веб-сайт портфолио или если вы уже используете загрузчик Twitter на своем веб-сайте, этот учебник будет вам очень полезен.
Первоначально у нас будет четыре блока на странице, и при нажатии на каждый блок, детали будут открыты в модальном всплывающем окне, которое занимает весь экран.
1. Первый шаг — это загрузить библиотеку Twitter начальной загрузки отсюда . Распакуйте содержимое в каталог.
2. Создайте файл, сохраните его как index.html и поместите в каталог, в который вы распаковали библиотеку Twitter начальной загрузки. Теперь структура каталогов должна выглядеть так:
3. Откройте index.html в текстовом редакторе и скопируйте в него содержимое ниже.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Modal Popup Twitter Bootstrap</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
#first-child
{
top:0;
left:0;
background-color: yellowgreen;
}
#second-child
{
top:0;
left:50%;
background-color: #E6537D;
color:black;
}
#third-child
{
top:50%;
left:0;
background-color: crimson;
}
#fourth-child
{
top:50%;
left:50%;
background-color: lightseagreen;
color:black;
}
.big-box
{
position: absolute;
width: 50%;
height: 50%;
color:white;
}
.big-box h2
{
text-align: center;
margin-top: 20%;
padding: 20px;
width: 100%;
font-size: 1.8em;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
cursor:pointer;
}
@media screen and (max-width: 46.5em)
{
.big-box h2
{
font-size:16px;
padding-left:0px;
}
}
@media screen and (max-width: 20.5em)
{
.big-box h2
{
font-size:12px;
padding-left:0px;
margin-top:30%;
}
}
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin:0;
}
.modal-content {
height: 100%;
border-radius: 0;
color:white;
overflow:auto;
}
.modal-title
{
font-size: 3em;
font-weight: 300;
margin: 0 0 20px 0;
}
.modal-content-one
{
background-color:yellowgreen;
}
.modal-content-two
{
background-color:#E6537D;
}
.modal-content-three
{
background-color:crimson;
}
.modal-content-four
{
background-color:lightseagreen;
} .close
{
color:white ! important;
opacity:1.0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6 big-box" id="first-child">
<h2 data-toggle="modal" data-target="#modal1">HI WELCOME TO PROGRAMMING FREE</h2>
<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-content-one">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Introduction to ProgrammingFree</h4>
</div>
<div class="modal-body">
MODAL POPUP CONTENT .....
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 big-box" id="second-child">
<h2 data-toggle="modal" data-target="#modal2">TRENDING ARTICLES</h2>
<!-- Modal -->
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-content-two">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Trending Articles</h4>
</div>
<div class="modal-body">
MODAL POPUP CONTENT ...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6 big-box" id="third-child">
<h2 data-toggle="modal" data-target="#modal3">DEMOS & DOWNLOADS</h2>
<!-- Modal -->
<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-content-three">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">DEMOS & DOWNLOADS</h4>
</div>
<div class="modal-body">
MODAL POPUP CONTENT ....
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 big-box" id="fourth-child">
<h2 data-toggle="modal" data-target="#modal4">STAY CONNECTED!</h2>
<!-- Modal -->
<div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-content-four">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Stay Connected!</h4>
</div>
<div class="modal-body">
MODAL POPUP CONTENT ...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
В приведенном выше коде, где бы вы ни находили «MODAL POPUP CONTENT», замените его содержимым, которое вы хотите отобразить в модальном всплывающем окне. Вот и все! Я только что скопировал код для отображения модального всплывающего окна, а затем добавил небольшой твик, чтобы модальное всплывающее окно расширилось до полной ширины экрана.
Bootstrap заботится о модальных всплывающих переходах и о том, как они появляются, когда пользователь нажимает на любой из четырех начальных блоков. Единственная настройка, которую мы делаем здесь, чтобы всплывающее окно занимало весь экран, это
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin:0;
}
.modal-content {
height: 100%;
border-radius: 0;
color:white;
overflow:auto;
}
Примечание: убедитесь, что содержимое вашего модального всплывающего окна реагирует с сетками, предоставляемыми Bootstrap.