我最近刚为客户启动了一个网站，我正在进入Bootstrap，我也是这个网站的新手。我的网站布局非常简单。导航栏中带有“Top Nav”的全宽页面，我想创建一个模态效果下拉菜单。因此，例如当您单击“关于”时，这应该触发.modal功能，一个简单的页面将覆盖背景图像并具有生物。但是，当我点击“关于”标签时，我没有回复，我在下面附上了我的代码，请帮助我什么也没得到，我也在使用DreamWeaver。
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Kameechi</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/Rae.css" rel="stylesheet">
<style type="text/css">
body,td,th {
font-family: Asap, sans-serif;
}
</style>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
<head>
<body style="background-image:url(assets/images/Kameechi.gif)">
<div class="topBar">
<span class="left">
<a class="cornerlogo" href="/"><img src="assets/images/kuh.png"></a>
<a data-toggle="modal" href="#myModal">ABOUT</a>
<a class="vids" href="#">VIDEOS</a>
<a class="feed" href="#">FEED</a>
<a class="music" href="#">MUSIC</a>
<a class="news" href="#">NEWS</a>
<a class="tour" href="#">TOUR</a>
<a class="shop" target="_blank" href="">SHOP</a>
</span>
<span class="right">
<a class="soundcloud" href="https://soundcloud.com/"> </a>
<a class="insta" href="https://instagram.com/"> </a>
<a class="twitter" href="https://twitter.com/"> </a>
<a class="fb" href="https://www.facebook.com/"> </a>
<a class="audiomack" href="https://www.audiomack.com/artist/"> </a>
<!-------------------- Modal --------------------->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
Modal content here....
</div>
</span>
</div>
</div>
<script id="backgrounds" type="text/html">
</script>
<noscript><iframe src="//www.googl...ility:hidden"></iframe></noscript>
<script>
</body>
</html>
.modal {
background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
color: #fff;
display: table;
height: 100%;
left: 0;
padding: 10px 0;
position: absolute;
text-align: center;
top: -300%;
transition: top 0.2s linear 0s;
width: 100%;
z-index: 1;
}
#music.modal {
background: rgba(255, 255, 2, 0.9) none repeat scroll 0 0;
}
#tour.modal {
background: rgba(255, 20, 2, 0.9) none repeat scroll 0 0;
}
.modal span {
display: table-cell;
font-size: 13px;
line-height: 21px;
padding: 0 9%;
text-align: justify;
vertical-align: middle;
}
#bio {
color: white;
margin: 100px 20%;
text-align: left;
}
#feed, #music, #tour_modal, #bio_modal {
display: table;
overflow: scroll;
}
body.feed .blog, body.feed .videos, body.tour .blog, body.tour .videos, body.bio .blog, body.bio .videos {
display: none;
}
body.music #music, body.feed #feed, body.tour #tour_modal, body.bio #bio_modal {
top: 0;
}
#tour_modal {
top: -1600px;
}
body.bio .close {
top: 40px;
}
body.bio #logo, body.bio .mask, body.tour #logo, body.tour .mask, body.news #logo, body.news .mask, body.news .latest, body.feed #logo, body.feed .mask, body.feed .latest, body.music #logo, body.music .mask, body.music .latest, body.videos #logo, body.videos .mask, body.videos .latest {
display: none !important;
}
.close {
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
font-size: 40px;
position: absolute;
right: 20px;
top: -100%;
transition: top 0.3s ease 0s;
z-index: 2;
}
.close:hover {
color: white;
答案 0 :(得分：2)
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
ABOUT
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
Modal content here....
</div>
只要您将data-toggle和data-target添加到要用作触发器的项目，就显然不需要使用按钮。
您的答案中的代码问题在于您在模式的div之后关闭菜单的跨度和div。这些需要在你的模态div开始之前关闭。像这样：
<div class="topBar">
<span class="left">
<a class="cornerlogo" href="/"><img src="assets/images/kuh.png"></a>
<a data-toggle="modal" data-target="#myModal" href="#">ABOUT</a>
<a class="vids" href="#">VIDEOS</a>
<a class="feed" href="#">FEED</a>
<a class="music" href="#">MUSIC</a>
<a class="news" href="#">NEWS</a>
<a class="tour" href="#">TOUR</a>
<a class="shop" target="_blank" href="">SHOP</a>
</span>
<span class="right">
<a class="soundcloud" href="https://soundcloud.com/"> </a>
<a class="insta" href="https://instagram.com/"> </a>
<a class="twitter" href="https://twitter.com/"> </a>
<a class="fb" href="https://www.facebook.com/"> </a>
<a class="audiomack" href="https://www.audiomack.com/artist/"> </a>
</span>
</div>
<!-------------------- Modal --------------------->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style=" overflow: scroll; height:auto;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Header</h4>
</div>
<div class="modal-body">
Body
</div>
</div>
</div>
</div>
小提琴：http://jsfiddle.net/jonmrich/jpotsewv/（点击关于触发模态）
PS：不确定为什么在答案中包含CSS。这看起来像标准的Bootstrap CSS，你已经用它调用了它：<link href="assets/css/bootstrap.min.css" rel="stylesheet">。如果您第二次包含CSS，则可能会导致模式出现问题。