4th Modal Prevents NavBar Dropdown Menu From Functioning?

Ad

I have a page with a Dropdown Menu in the NavBar & there are 4 Modals elsewhere on the page. The Dropdown Menu stopped functioning after I added the 4th Modal for some reason. If I remove the 4th modal, the Dropdown Menu work fine. How can I make all 4 Modals & the Dropdown Menu work? Any help is appreciated.

Link to a sample with the Modals working but not the dropdown menu: http://www.buzzpunchmedia.com/kuyaba/modals.html

Link to a sample with the 4th modal removed(mailing list btn) & the Dropdown Menu working: http://www.buzzpunchmedia.com/kuyaba/modals2.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>Restaurant</title>
    <!-- Bootstrap -->
    <link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
    .body-modal {
}
    </style>
    <link target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="modals.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
  </script>
  </head>
  <body>
  <div class="container-fluid" id="wrapper">
<div class="container-fluid" id="nav-container">
    <nav class="navbar navbar-default">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
          <a class="navbar-brand menu-top" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Menu <span class="glyphicon glyphicon-hand-right"></span></a></div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="defaultNavbar1">

 <ul class="nav navbar-nav navbar-right">
              <li id="nav-home"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li id="nav-rooms"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="rooms.html">Rooms</a></li>
              <li class="active active-text"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="restaurant.html">Restaurant</a></li>
              <li id="nav-bar"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="bar.html">Bar</a></li>

              <li class="dropdown" id="nav-more"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">More<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="gallery.html">Gallery/Tour</a></li>
                  <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">About/History</a></li>
                  <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Functions</a></li>
                  <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Gift Shop</a></li>
                </ul>
              </li>

              <li id="nav-gallery"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="gallery.html">Gallery/Tour</a></li>
              <li id="nav-about"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">About/History</a></li>
              <li id="nav-functions"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Functions</a></li>
              <li id="nav-giftshop"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">Gift shop</a></li>
              <li class="nav-book" id="nav-book"><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="reserve.html">RESERVE NOW</a></li>
            </ul>
            </div>
            <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
    </nav>
    </div>
<div class="container main-background">
  <article id="main"><br>
<div class="row menu-buttons">
  <div class="col-lg-4 col-md-4 col-sm-4 breakfast-menu">
        <p> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#breakfastModal" role="button" class="btn btn-primary menu-btn" type="button" data-toggle="modal">Breakfast Menu</a> </p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 lunch-menu">
        <p> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#lunchModal" role="button" class="btn btn-primary menu-btn" type="button" data-toggle="modal">Lunch Menu</a> </p>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4">
        <p> <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#dinnerModal" role="button" class="btn btn-primary menu-btn" type="button" data-toggle="modal">Dinner Menu</a> </p>
      </div>
  </div>
</article>
</div>
    <div class="container-fluid footer-full">
      <div class="container footer-container">
<footer>
  <div class="row" id="footer-row">
<div class="col-sm-4 footer-rightcolumn">
<div class="footer-mailinglist"><p><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#myModal" role="button" class="btn btn-default maillist-btn" type="button" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> Join the Mailing List!</a></p></div>
  </div>

  </div>
<div class="row footer-links-row"> </div>


</footer>
      </div>
    </div>
</div>        


<!-- Begin E-Mail List Modal(MyModal) - jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>


    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
        <div class="modal fade" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Join the E-Mail List</h4>
                </div><!-- end modal-header -->
                    <div class="modal-body">
                        <p>Receive info & updates about Specials, Coupons & Events.</p>
                            <hr>
                            <p><small class="text-muted">PS. Your info will be kept in strict confidence.</small></p>

    <form class="form-horizontal" method="post" action="http://www.fatcow.com/scripts/formemail.bml">
    <input type="hidden" name="my_email" value="[email protected]" />
    <input type="hidden" name="subject" value="Join the Mailing List" />
    <input type="hidden" name="required" value="fullname,emailaddress" />
           <div class="form-group">
           <label class="col-lg-2 control-label" for="fullname">Name</label>
            <div class="col-lg-10">
            <input class="form-control" type="text" id="fullname" name="fullname" placeholder="Full Name">
                        </div>
                        </div>

            <div class="form-group">
            <label class="col-lg-2 control-label" for="emailaddress">E-Mail</label>
            <div class="col-lg-10">
            <input class="form-control" type="text" id="emailaddress" name="emailaddress" placeholder="[email protected]">
        </div>
        </div>

    <div class="form-group">
        <div class="col-lg-12">
    <button class="btn btn-success pull-right" type="submit" name="submit" value="Submit">Send!</button>     <button class="btn btn-default pull-right close-button" data-dismiss="modal" type="button">Close</button>
        </div>
        </div>
        <input type="hidden" name="thankyou_url" value="http://www.buzzpunchmedia.com/kuyaba/index.html" />
    </form>
        </div><!-- end modal-body -->
            </div><!-- end modal-content -->
            </div><!-- end modal-dialog -->
        </div><!-- end myModal -->


<!-- Begin Breakfast Modal - jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
    <div class="modal fade" id="breakfastModal">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Breakfast Menu</h4>
    </div><!-- end modal-header -->

<div class="modal-body modalimage-center"> <br>
<div class="modal-footer"><div class="col-lg-12">
<button class="btn btn-default pull-right close-button" data-dismiss="modal" type="button">Close</button>
</div>

        </div>
                                          </div><!-- end modal-body -->
                                      </div><!-- end modal-content -->
                                    </div><!-- end modal-dialog -->
  </div><!-- end breakfast Modal -->


<!-- Begin Lunch Modal - jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
    <div class="modal fade" id="lunchModal">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Lunch Menu</h4>
                                            </div><!-- end modal-header -->
                                            <div class="modal-body"> <br>
<div class="modal-footer"><div class="col-lg-12">
<button class="btn btn-default pull-right close-button" data-dismiss="modal" type="button">Close</button>
</div>

              </div>
                                            </div><!-- end modal-body -->
                                      </div><!-- end modal-content -->
                                    </div><!-- end modal-dialog -->
  </div><!-- end Lunch Modal -->


  <!-- Begin Dinner Modal - jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
    <div class="modal fade" id="dinnerModal">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Dinner Menu</h4>
                                            </div><!-- end modal-header -->
                                            <div class="modal-body"> <br>
<div class="modal-footer"><div class="col-lg-12">
<button class="btn btn-default pull-right close-button" data-dismiss="modal" type="button">Close</button>
</div>

              </div>
                                            </div><!-- end modal-body -->
                                      </div><!-- end modal-content -->
                                    </div><!-- end modal-dialog -->
  </div><!-- end Dinner Modal -->


      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>
</html>


@charset "UTF-8";
h1, h3, p {
    text-align: center;
}
.image-fill {
    width: 100%;
}
#wrapper {
    padding-right: 0px;
    padding-left: 0px;
    background-repeat: repeat;
}
#main {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 60px;
    font-size: medium;
    background-color: #FFFFFF;
}
.navbar.navbar-default {
    border-width: 0px;
    border-radius: 0px;
    background-color: #BFBFBF;
    margin-top: 0px;
    margin-bottom: 0px;
}
#nav-container {
    background-color: #BFBFBF;
    box-shadow: 0px 0 10px;
    position: relative;
    z-index: 8;
    -webkit-box-shadow: 0px 0 10px;
}
.menu-top {
    display: none;
}
.glyphicon.glyphicon-home {
    font-size: 16px;
}
#nav-home {
    font-size: 20px;
}
#nav-rooms {
    font-size: 20px;
}
#nav-restaurant {
    font-size: 20px;
}
#nav-bar {
    font-size: 20px;
}
#nav-more {
    font-size: 20px;
}
.active-text {
    font-size: 20px;
}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:hover {
    color: #CFF879;
    text-decoration: none;
}
a:visited {
    color: #FFFFFF;
    text-decoration: none;
}
.nav-book {
  background-color: #73a014;
  background-image: -webkit-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
  background-image:    -moz-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
  background-image:      -o-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
  background-image:         linear-gradient(180deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
  text-align: center;
}

.navbar-default .navbar-nav .nav-book > a,
.navbar-default .navbar-nav .nav-book > a:focus {
  color: #cff879;
  font-size: 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.navbar-default .navbar-nav .nav-book > a:hover,
.navbar-default .navbar-nav .nav-book > a:active,
.navbar-default .navbar-nav .nav-book.active > a,
.open .dropdown-toggle.nav-book {
  color: #73a014;
  font-size: 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  background-color: #cff879;
  background-image: -webkit-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
  background-image:    -moz-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
  background-image:      -o-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
  background-image:         linear-gradient(180deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
}

#nav-giftshop {
    display: none;
}
#nav-gallery {
    display: none;
}
#nav-functions {
    display: none;
}
#nav-about {
    display: none;  
}
.main-background {
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.menu-buttons {
    margin-top: 60px;
}
.menu-btn, .menu-btn:focus {
    background-color: #73a014;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 16px;
    border-radius: 5px;
    border-left-color: #73a014;
    border-right-color: #73a014;
    border-top-color: #73a014;
    color: #FFFFFF;
    width: 80%;
    border-bottom-width: 0px;
    -webkit-box-shadow: 3px 3px 8px #464646;
    box-shadow: 3px 3px 8px #464646;
    border-style: none;
    outline: none;
}
.menu-btn:hover, .menu-btn:active, .menu-btn.active, .open .dropdown-toggle.menu-btn {
    background-color: #403C3C;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 16px;
    border-radius: 5px;
    border-left-color: #73a014;
    border-right-color: #73a014;
    border-top-color: #73a014;
    color: #FFFFFF;
    width: 80%;
    border-bottom-width: 0px;
    -webkit-box-shadow: 1px 1px 2px #464646;
    box-shadow: 1px 1px 2px #464646;
    outline: none;
 }

.footer-full {
    background-color: #403C3C;
    -webkit-box-shadow: inset -20px 10px;
    box-shadow: inset -20px 10px;
    position: relative;
    z-index: 14;
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 0px;
    bottom: 0px;
}
.footer-container {
    margin-top: 15px;
    margin-bottom: 20px;
}
.footer-rightcolumn {
    padding-left: 50px;
}
.footer-mailinglist {
}
.maillist-btn, .maillist-btn:focus {
    background-color: #DDDDDD;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    border-radius: 5px;
    border-left-color: #73a014;
    border-right-color: #73a014;
    border-top-color: #73a014;
    color: #73a014 !important;
    width: 78%;
    border-bottom-width: 0px;
    -webkit-box-shadow: 3px 3px 8px #464646;
    box-shadow: 3px 3px 8px #464646;
    outline: none;
    float: left;
    clear: both;
}
.maillist-btn:hover, .maillist-btn:active, .maillist-btn.active, .open .dropdown-toggle.maillist-btn {
    background-color: #73a014;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    border-radius: 5px;
    border-left-color: #73a014;
    border-right-color: #73a014;
    border-top-color: #73a014;
    color: #FFFFFF !important;
    width: 78%;
    border-bottom-width: 0px;
    -webkit-box-shadow: 1px 1px 2px #464646;
    box-shadow: 1px 1px 2px #464646;
    outline: none;
    float: left;
    clear: both;
    height: auto;
}

.modalimage-center {
    margin-left: auto;
    margin-right: auto;
    padding-left: auto;
    padding-right: auto;
    text-align: center;
}
.image-center {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.print-button {
    margin-right: 15px;
}
.close-button {
    margin-right: 15px;
}
Ad

Answer

Ad

Use the latest version of JQuery and Bootstrap in that specific order, preferibly in the head of the document. All other references to jqueries can go on the bottom.

Eliminate all the various calls to JQuery and Bootstrap before every modal.

<!-- Begin Dinner Modal - jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-1.11.2.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.js"></script>

DO NOT, under any circumstances alter Bootstrap.js. Use a separate main.js for all javascript functions.

After cleaning your code a little and using updated copies of JQuery and Bootstrap.js, it works fine.

Here is the DEMO **code is too long to post here

Ad
source: stackoverflow.com
Ad