Over a million developers have joined DZone.

Responsive Full Width Modal Popup Layout Using Twitter Bootstrap

Here's how to implement a full width, responsive modal pop with the Twitter bootstrap.

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
css ,html5 ,web dev ,bootstrap

Published at DZone with permission of Priyadarshini Balachandran, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}