0
У меня есть страница с раскрывающимся меню в NavBar & есть 4 модификации в другом месте на странице. Выпадающее меню перестало функционировать после того, как я по какой-то причине добавил 4-й мод. Если я удаляю 4-й модальный, выпадающее меню работает нормально. Как я могу сделать все 4 модала & в раскрывающемся меню? Любая помощь приветствуется.4th Modal Предотвращает выпадающее меню NavBar от работы?
Ссылка на образец с модальностью рабочим, но не ниспадающее меню: http://www.buzzpunchmedia.com/kuyaba/modals.html
Ссылка на образец с 4-модальным удален (список рассылка БТНО) & В раскрывающемся меню рабочий: 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 href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.body-modal {
}
</style>
<link 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" 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 href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li id="nav-rooms"><a href="rooms.html">Rooms</a></li>
<li class="active active-text"><a href="restaurant.html">Restaurant</a></li>
<li id="nav-bar"><a href="bar.html">Bar</a></li>
<li class="dropdown" id="nav-more"><a 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 href="gallery.html">Gallery/Tour</a></li>
<li><a href="#">About/History</a></li>
<li><a href="#">Functions</a></li>
<li><a href="#">Gift Shop</a></li>
</ul>
</li>
<li id="nav-gallery"><a href="gallery.html">Gallery/Tour</a></li>
<li id="nav-about"><a href="#">About/History</a></li>
<li id="nav-functions"><a href="#">Functions</a></li>
<li id="nav-giftshop"><a href="#">Gift shop</a></li>
<li class="nav-book" id="nav-book"><a 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 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 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 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 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">×</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">×</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">×</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">×</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;
}
2 вещи (и это не ответ, но очень хороший совет) не нужно вызывать JQuery и Bootstrap.js так много раз. Вам просто нужна ссылка один раз на документ и убедитесь, что JQuery находится выше Bootstrap. И положи их в голову. Я знаю, что рекомендуется иметь скрипты внизу, но эти два являются вашими тяжелыми нападающими. – LOTUSMS
Теперь, во-вторых. Я скопировал ваш код в кодексе, и он отлично работает для меня. Он использует вызов для последнего jquery и bootstrap3. Возможно, твоя причина по какой-то причине. Замените свой код на последнюю версию и используйте реальную версию JQuery, а не last.jquery.min. Вот код на вашей рабочей странице http://codepen.io/anon/pen/OMRgbL – LOTUSMS
Большое спасибо LOTUSMS. Я очень ценю советы и ответ на мою проблему. Это, должно быть, было что-то в первом модале, который был поврежден. Я изменил его с вашим рабочим кодом, и теперь все работает отлично. Еще раз спасибо. –