title: Bootstrap 3 transparent and fullscreen modals
body: <p>I am using code from this website <a href="http://www.minimit.com/demos/bootstrap-3-transparent-and-fullscreen-modals" rel="nofollow">http://www.minimit.com/demos/bootstrap-3-transparent-and-fullscreen-modals</a> and my modal works but I cannot dismiss it. The button does not work.</p>
  
  <p>Please see if you see anything I might of missed.
      
      </p>
  
  <pre><code>&lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;Queen Of The Fairies&lt;/title&gt;
  
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link href="css/background.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;link href="css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"&gt;
  
      &lt;!--Favicon--&gt;
      &lt;link rel="apple-touch-icon" sizes="57x57" href="ico/apple-icon-57x57.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="60x60" href="ico/apple-icon-60x60.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="72x72" href="ico/apple-icon-72x72.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="76x76" href="ico/apple-icon-76x76.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="114x114" href="ico/apple-icon-114x114.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="120x120" href="ico/apple-icon-120x120.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="144x144" href="ico/apple-icon-144x144.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="152x152" href="ico/apple-icon-152x152.png"&gt;
      &lt;link rel="apple-touch-icon" sizes="180x180" href="ico/apple-icon-180x180.png"&gt;
      &lt;link rel="icon" type="image/png" sizes="192x192"  href="ico/android-icon-192x192.png"&gt;
      &lt;link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png"&gt;
      &lt;link rel="icon" type="image/png" sizes="96x96" href="ico/favicon-96x96.png"&gt;
      &lt;link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png"&gt;
      &lt;link rel="manifest" href="/manifest.json"&gt;
      &lt;meta name="msapplication-TileColor" content="#ffffff"&gt;
      &lt;meta name="msapplication-TileImage" content="ico/ms-icon-144x144.png"&gt;
      &lt;meta name="theme-color" content="#ffffff"&gt;
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"&gt;
  
      &lt;script&gt;
      $(".modal-fullscreen").on('show.bs.modal', function () {
        setTimeout( function() {
          $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
        }, 0);
      });
      $(".modal-fullscreen").on('hidden.bs.modal', function () {
        $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
      });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--Open Navbar--&gt;
  &lt;nav class="navbar navbar-custom navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="index.html"&gt;&lt;img src="logo1.png"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;
            &lt;a class="active" data-toggle="modal" data-target="#modal-fullscreen" href="#introModal"&gt;INTRO &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;PRICING&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;SERVICES &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;TAROT CARD&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;REIKI&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;AXIOTONAL&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;HEALING&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;MASSAGE&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;&lt;!--CLOSE DROPDOWN--&gt;
            &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;
              &lt;a class="modal-link" data-toggle="modal" data-target="#modal-fullscreen" href="#aboutModal"&gt;ABOUT ME&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;&lt;!--Close Navbar--&gt;
  
  &lt;!-- aboutModal fullscreen --&gt;
  &lt;div class="modal modal-fullscreen fade" id="modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="aboutModal"&gt;ABOUT ME&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;img src="images/about_me.jpg" class="img-circle img-responsive center-block"&gt;
              &lt;p class="text-justify"&gt;
                  My name is Tanja Eklund Almon and I am a gifted healer and psychic reader. I have been doing this for the entirety of my lifetime and I have done readings for a lot of people over the years. I have always had positive responses and experiences. If you require a tarot card reading or would like to relax in complete meditation and immerse yourself in a reiki session. Perhaps you would like to experience an axiotonal realignment, please do not hesitate to call or email me.&lt;br&gt;&lt;br&gt;If you require immediate assistance you may click on the chat widget below and I'll be with you shortly...&lt;/p&gt;&lt;br/&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary btn-lg center-block" data-toggle="modal" data-target="#aboutModal" data-dismiss="modal"&gt; OK &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- introModal fullscreen --&gt;    
  &lt;div class="modal modal-fullscreen fade" id="modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="introModal" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="introModal"&gt;ABOUT ME&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;img src="images/fairy.png" class="img-square img-responsive center-block"&gt;
              &lt;p text-justify&gt;My name actually means "Queen of the Fairies" and out of that idea arose my business name. A colleague once told me that I was primarily attuned to water and that my power was generated from that realm.  I am the real thing and sometimes it is scary real. I can truly identify information hidden from the normal senses. The word "psychic" is also used as an adjective to describe these abilities.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary btn-lg center-block" data-toggle="modal" data-target="#introModal" data-dismiss="modal"&gt; OK &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/scripts.js"&gt;&lt;/script&gt;
  
      &lt;!-- Fullscreen modals JS--&gt;
      &lt;!-- include jQuery --&gt;
      &lt;script src="https://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- include bootstrap --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;footer id="footer"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12 col-md-12 col-lg-12"&gt;
                      &lt;ul class="social-icons"&gt;
                          &lt;li&gt;&lt;a href="https://www.facebook.com/" class="facebook"&gt;&lt;i class="fa fa-facebook" style="color: #3b5998;"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="https://twitter.com/" class="twitter"&gt;&lt;i class="fa fa-twitter" style="color: #00aced;"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="https://plus.google.com/" class="google"&gt;&lt;i class="fa fa-google-plus" style="color: #dd4b39;"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="https://ca.linkedin.com/in/" class="linkedin"&gt;&lt;i class="fa fa-linkedin" style="color: #007bb6;"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="copyright"&gt;
                          &lt;p class="pull-right text-muted small"&gt;&lt;a href="http://www.kimosabeit.com"&gt;Designed by:  Dale Sawanas &amp;copy; Kimosabe IT&lt;/a&gt;&lt;/p&gt;&lt;br&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>