我最近刚刚为客户创建了一个网站，并且正在使用 Bootstrap，而且我还是这个网站的新手。我有网站布局，非常简单。导航栏中带有“顶部导航”的全宽页面，我想创建一个模态效果下拉菜单。因此，例如，当您单击“关于”时，这应该会触发 .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;
最佳答案
<!-- 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 之后关闭了菜单的 span 和 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>
fiddle :http://jsfiddle.net/jonmrich/jpotsewv/ (点击“关于”触发模态)
PS:不确定为什么您在答案中包含 CSS。这看起来像标准的 Bootstrap CSS，您已经使用它来调用它:<link href="assets/css/bootstrap.min.css" rel="stylesheet"> 。如果您第二次包含 CSS，则可能还会导致模式出现一些问题。
关于javascript - 在导航链接单击上触发 Bootstrap 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32229556/