Bootstrap modal is not working with Bootstrap carousel
<p>I have a bootstrap modal which opens upon clicking the link. But it just does not work with the bootstrap carousel on the page.
I have tried placing the carousel HTML above the modal HTML and vice versa but nothing helped :(</p>

<p>The modal looks like this-
<a href="https://i.stack.imgur.com/LEPy7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LEPy7.png" alt=""></a></p>

<p>But it should actually be like this-
<a href="https://i.stack.imgur.com/tmwcg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tmwcg.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.carousel').carousel({
  interval: 4000,
  pause: "false"
});


var $item = $('.carousel .item');
var $wHeight = $(window).height();

$item.height($wHeight); 
$item.addClass('full-screen');

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
 margin:0; 
 padding:0;
 height:100%;
 }

    /*Navigation Bar*/
 .nav {
 margin:0px; 
 }


 .navbar{
 margin-bottom:0px;
 font-family: 'Droid Serif', serif;
 font-size:20px; 
    
 }
 .navbar-inverse .navbar-brand{
 font-size:20px;
 font-family: 'Droid Serif', serif;
 color: #fed136; 
 }
   
 
 
 /*Carousel*/
 
   .full-screen {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   }


    div.form-group{
    position:absolute;
    top:40%;
    left:40%; /* change to whatever you want */
    right:auto; /* change to whatever you want */
    bottom:auto; /* change to whatever you want */
    }

    .carousel img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
    z-index: -1;
    }

    #footer{
 background-color:black; 
 color:white;
 font-size:15px;
 text-align:center;
 }
  
 
 /*Modal*/
 .modal-header, h4, .close {
 background-color: #5cb85c;
 color:white !important;
 text-align: center;
 font-size: 30px;
 }

 .modal-footer {
 background-color: #f9f9f9;
 }

 .modal-body{
     max-height:calc(100vh - 210px);
     overflow-y:auto;
    }
 
 #register .modal-dialog  {
 width:40%;
 
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;! doctype html&gt;
&lt;html lang="en"&gt;

&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;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" &gt;

&lt;!-- Optional theme --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" &gt;

&lt;!-- Custom CSS --&gt;
&lt;link href="main.css" rel="stylesheet" type='text/css'&gt; 

 
&lt;/head&gt;  
  
&lt;body data-spy="scroll" data-target=".navbar" data-offset="50"&gt; 

&lt;!--Navigation--&gt;  
&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;

&lt;div class="conatiner-fluid"&gt;
     &lt;!--page scroll button for --&gt;
   &lt;div class="navbar-header" role="navigation"&gt;
     &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar "&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="main.html"&gt;Bookify&lt;/a&gt;
   &lt;/div&gt; &lt;!--page scroll button--&gt;
   
   &lt;div&gt;
   &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;

      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li &gt;&lt;a href="main.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li &gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt; 
  &lt;li &gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt; 
  &lt;li &gt;&lt;a href="cancellation.html"&gt;Cancellation&lt;/a&gt;&lt;/li&gt;
        &lt;li &gt;&lt;a href="#sign in/sign up" data-toggle="modal" data-target="#myModal"&gt;Sign in /Sign up&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt; &lt;!--ul-li--&gt;
  &lt;/div&gt; &lt;!--navbar collapse--&gt;
  &lt;/div&gt; &lt;!--container-fluid--&gt;
&lt;/nav&gt;
&lt;!--Navigation--&gt;

 

&lt;!--Caresoul--&gt;

&lt;div id="mycarousel" class="carousel slide carousel-fit" data-ride="carousel "&gt;

  &lt;!-- Indicators --&gt;
  &lt;ol class="carousel-indicators"&gt;
    &lt;li data-target="#mycarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
    &lt;li data-target="#mycarousel" data-slide-to="1"&gt;&lt;/li&gt;
    &lt;li data-target="#mycarousel" data-slide-to="2"&gt;&lt;/li&gt;    
  &lt;/ol&gt;

  
  &lt;!-- Wrapper for slides --&gt;
  &lt;div class="carousel-inner" role="listbox"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="bus6.jpg" data-color="lightblue" alt="First Image"&gt;  
    &lt;/div&gt;
 
  
    &lt;div class="item"&gt;
      &lt;img src="road2.jpg" data-color="firebrick" alt="Second Image"&gt;      
    &lt;/div&gt;
 
  &lt;div class="item"&gt;
      &lt;img src="seat1.jpg" data-color="firebrick" alt="Second Image"&gt;      
    &lt;/div&gt;
 
    &lt;!-- more slides here --&gt;
  &lt;/div&gt;

   
 &lt;div class="form-group"&gt; &lt;!--Form--&gt;
      &lt;label class="control-label requiredField" for="select"&gt;
       From
       &lt;span class="asteriskField"&gt;
        *
       &lt;/span&gt;
      &lt;/label&gt;
      &lt;select class="select form-control" id="select" name="select"&gt;
       &lt;option value="Mumbai"&gt;
        Banglore
       &lt;/option&gt;
       &lt;option value="Pune"&gt;
        Delhi
       &lt;/option&gt;
       &lt;option value="Delhi"&gt;
         Indore
       &lt;/option&gt;
       &lt;option value="Banglore"&gt;
        Mumbai
       &lt;/option&gt;
       &lt;option value="Indore"&gt;
        Pune 
       &lt;/option&gt;
      &lt;/select&gt;     
     
  
  &lt;label class="control-label requiredField" for="select"&gt;
       To
       &lt;span class="asteriskField"&gt;
        *
       &lt;/span&gt;
      &lt;/label&gt;
      &lt;select class="select form-control" id="select" name="select"&gt;
       &lt;option value="Mumbai"&gt;
        Banglore
       &lt;/option&gt;
       &lt;option value="Pune"&gt;
        Delhi
       &lt;/option&gt;
       &lt;option value="Delhi"&gt;
         Indore
       &lt;/option&gt;
       &lt;option value="Banglore"&gt;
        Mumbai
       &lt;/option&gt;
       &lt;option value="Indore"&gt;
        Pune 
       &lt;/option&gt;
      &lt;/select&gt;     
     
   &lt;label&gt;Select Date*&lt;/label&gt;
  &lt;input type="date" class="form-control input-lg" name="start" placeholder="Check In"&gt; 
       &lt;/br&gt;
     &lt;a href="search.html" class="btn btn-success btn-block" role="button"&gt;Search&lt;/a&gt;
     &lt;/div&gt;
   
  &lt;!--Form--&gt;
  
    
  &lt;!-- Controls --&gt;
  &lt;a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev"&gt;
    &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="right carousel-control" href="#mycarousel" role="button" data-slide="next"&gt;
    &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;

&lt;!--Caresoul--&gt;


&lt;!--Footer--&gt;
&lt;div id="footer"&gt;
  &lt;div class="container"&gt;
 &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt; &lt;/br&gt;
    &lt;ul class="list-inline"&gt;                         
    &lt;li&gt; &lt;a href="main.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt; &lt;/li&gt;
    &lt;li&gt; &lt;a href="contact.html"&gt;Contact&lt;/a&gt; &lt;/li&gt;
    &lt;li &gt;&lt;a href="cancellation.html"&gt;Cancellation&lt;/a&gt;&lt;/li&gt;
          &lt;li &gt;&lt;a href="#sign in/sign up" data-toggle="modal" data-target="#myModal"&gt;Sign in /Sign up&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
         &lt;/div&gt; &lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
        &lt;div class="col-md-12"&gt; Copyright © 2016 Bookify. All Rights Reserved&lt;/div&gt;   
 &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!--Footer--&gt;




 &lt;!-- Modal --&gt;
  
  &lt;div class="modal fade" id="myModal" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;

      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 style="color:red;"&gt;&lt;span class="glyphicon glyphicon-lock"&gt;&lt;/span&gt; Login&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form role="form"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="email"&gt;&lt;span class="glyphicon glyphicon-envelope"&gt;&lt;/span&gt; Email&lt;/label&gt;
              &lt;input type="email" class="form-control" id="email" placeholder="Enter email" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="password"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt; Password&lt;/label&gt;
              &lt;input type="password" class="form-control" id="password" placeholder="Enter password" required&gt;
            &lt;/div&gt;
            &lt;div class="checkbox"&gt;
              &lt;label&gt;&lt;input type="checkbox" value="" checked&gt;Remember me&lt;/label&gt;
            &lt;/div&gt;
            &lt;button type="submit" class="btn btn-default btn-success btn-block"&gt;&lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt; Login&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt; Cancel&lt;/button&gt;
          &lt;p&gt;Not a member? &lt;a data-dismiss="modal" data-toggle="modal" data-target="#register"&gt;Sign up&lt;/a&gt;&lt;/p&gt; 
          &lt;p&gt;Forgot &lt;a href="#"&gt;Password?&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;  

&lt;!---Modal1----&gt;

&lt;!---Modal2----&gt;
&lt;div class="modal fade" id="register" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;

      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 style="color:red;"&gt;&lt;span class="glyphicon glyphicon-lock"&gt;&lt;/span&gt;Register&lt;/h4&gt;
        &lt;/div&gt;
       &lt;div class="modal-body"&gt;
            &lt;form role="form"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="firstName"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="firstName" placeholder="Name" required&gt;
            &lt;/div&gt;
   &lt;div class="form-group"&gt;
              &lt;label for="email"&gt;&lt;span class="glyphicon glyphicon-envelope"&gt;&lt;/span&gt;Email&lt;/label&gt;
              &lt;input type="email" class="form-control" id="email" placeholder="Email" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="password"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt; Password&lt;/label&gt;
              &lt;input type="password" class="form-control" id="password" placeholder="Password" required&gt;
            &lt;/div&gt;
   
   &lt;div class="form-group"&gt;
                    &lt;label for="phonenum"&gt;&lt;span class="glyphicon glyphicon-phone"&gt;&lt;/span&gt;Phone Number (format: xxxx-xxxxxx)&lt;/label&gt;
                    &lt;input type="tel" pattern="^\d{4}-\d{6}$" class="form-control"  placeholder="Number"required&gt;    
                &lt;/div&gt;
    
                &lt;div class="form-group"&gt;
                    &lt;label for="birthDate"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;Date of Birth&lt;/label&gt;
                    &lt;input type="date" id="birthDate" class="form-control" required&gt;
               &lt;/div&gt;
      
      &lt;div class="form-group"&gt;
                    &lt;label class="control-label col-sm-3"&gt;Gender&lt;/label&gt;
                    &lt;div class="col-sm-6"&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="col-sm-4"&gt;
                                &lt;label class="radio-inline"&gt;
                                    &lt;input type="radio" name="radio-choice"  required&gt;Female
                                &lt;/label&gt;
                            &lt;/div&gt;
                            &lt;div class="col-sm-4"&gt;
                                &lt;label class="radio-inline"&gt;
                                    &lt;input type="radio"  name="radio-choice" required &gt;Male
                                &lt;/label&gt;
                            &lt;/div&gt;
                            
                        &lt;/div&gt;
                    &lt;/div&gt;
     
     &lt;div class="form-group"&gt;
                    &lt;div class="col-sm-9 col-sm-offset-3"&gt;
                        &lt;div class="checkbox"&gt;
                            &lt;label&gt;
                                &lt;input type="checkbox" required&gt;I accept &lt;a href="#"&gt;terms&lt;/a&gt;
                            &lt;/label&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt; &lt;!--form-group --&gt;
        
         
            &lt;button type="submit" class="btn btn-default btn-success btn-block"&gt;&lt;span class="glyphicon glyphicon-off"&gt;&lt;/span&gt; Register&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt; Cancel&lt;/button&gt;
          
    &lt;p&gt;Already a member?&lt;a data-dismiss="modal" data-toggle="modal" data-target="#myModal"&gt;Sign in&lt;/a&gt;&lt;/p&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
 &lt;/div&gt;  
&lt;!---Modal2----&gt;




&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
 
     
&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" &gt;&lt;/script&gt;

 
 &lt;!--Custome Jquery--&gt;
&lt;script src="main.js"&gt;&lt;/script&gt;

 
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>