Responsive Full Width Modal Popup Layout using Twitter Bootstrap
In this article, let us explore how to make responsive full width modal popup using twitter bootstrap. This is one of the latest trend ...
https://www.programming-free.com/2014/08/responsive-full-width-modal-popup.html?m=0
In this article, let us explore how to make responsive full width modal popup using twitter bootstrap. This is one of the latest trend in web design which I came across several times and I found it very attractive. You can see a good example of this here and this is done using plain css3 media queries, transitions and html5. So I am going to explain how this can be achieved easily using Twitter bootstrap modal popups. In case, you want to quickly bring up your portfolio website or if you are already using Twitter bootstrap in your website, then this tutorial will be of much help to you.
Initially, we will have four blocks on the page and on clicking each block, the details will be opened in a modal popup that occupies full screen.
1. First step is to download twitter bootstrap library from here. Unzip the contents in a directory.
2. Create a file, save it as index.html and place it in the directory where you have unzipped twitter bootstrap library. Now the directory structure must look like this,
3. Open index.html in a text editor and copy the below contents to it.
<!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>
In the above code, wherever you find "MODAL POPUP CONTENT" replace it with the content you want to display in the modal popup. That is all! I have just copied the code for displaying modal popup from here and then added a small tweak to make the modal popup expand to full-width of the screen.
Bootstrap takes care of modal popup transitions and how they appear when the user clicks on any of the four initial blocks. The only tweak that we are doing here to make the popup occupy the full screen is this,
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin:0;
}
.modal-content {
height: 100%;
border-radius: 0;
color:white;
overflow:auto;
}
Note: Make sure to have the contents in your modal popup to be responsive with the grids provided by Bootstrap.
how do you add a gridview into a modal like you have under demo's and downloads, i tried adding my gridview but when my gridview does a post back it goes back to the main popup?
ReplyDeleteMine is static, so I did not worry about postbacks as this is a design tutorial. If you want to do this in ASP.NET and add a gridview you might have to play with the bootstrap modal popup plugin and add some more jquery to have the same modal popup open after postback.
Deletehi....Its very help ful....but what if i hav a large number of data in modal....it will be very slow??????
ReplyDeleteThe speed at which the modal popup loads depends on various factors, especially when you are retrieving something from the server. In that case, you have to play around with the bootstrap modal javascript to display something on the front end to indicate the user that the content is loading.
DeleteI am trying to integrate this popup with content that requires a scrollbar. I am having an issue with the parent's page scrollbar grouping next to the modal's scrollbar. Is there a way to address this issue?
DeleteThanks!!
I am not able to get into your demo, it seems link failed to load. please check and let me know. Thanks Priya.
ReplyDeletehi I'm an IT student and I certainly love this post.
ReplyDeleteI'm using this code and I'm trying to put a navigation bar but it doesn't seem to work for me any suggestions??
ReplyDeleteUniquoe is the Best Digital Marketing Company in India offering Best Digital Marketing Services to
its clients across all over the globe at a very reasonable price range.
Best IT Services Provider Company in Delhi
Digital marketing services in delhi
web development services in delhi
seo services in delhi ncr
best makeup artist in gurgaon
best interior designers in gurgaon
ReplyDeleteThat's so nice! I like this car, but also I like this service for essay and homework! This guys really can assistance you, and you should try! Check this and write to them best ghostwriter and go for it! Excellent luck and have a kind day!
ReplyDeleteThe cell phone is an amazing piece of technology. You've come to the right place if you're looking for the best gadget at a reasonable price. Handy Zubehör Stuttgart(mobile phone shop) will assist you with their great services, ensuring 100 percent product quality.
ReplyDelete