我想問問 為什么我的模態(tài)被遮罩擋住了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<!-- 鏈接bootstrap.min -->
<link href="bootstrap/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
#nav{?
position:fixed;
}
.navbar-logo{?
? background:no-repeat url(img/logo.jpg) center center;?
display:block;?
width:96px;
height:50px;
}
.shop{?
? line-height:50px;?
cursor:pointer;
color:#999;
margin:0px 20px;
}
.shop:hover{
color:#333;
}
.user{?
? line-height:50px;?
cursor:pointer;
color:#999;
margin:0px 20px;
}
.user:hover{
color:#333;
}
.link{
margin-top:56px;
}
.thumbnail{
background:#CCC;
border:#333 2px solid;?
height:360px;
}
.main{
margin-top:80px;
}
</style>
</head>
<body>
<!-- 導航 -->
<nav class="navbar navbar-default navbar-fixed-top" id="nav">
? ? ? <div class="container">
? ? ? <div class="container-fluid">
? ? ? ? <!-- 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="#bs-example-navbar-collapse-1" aria-expanded="false">
? ? ? ? ? ? <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-logo" href="#"></a>
? ? ? ? </div>
? ??
? ? ? ? <!-- Collect the nav links, forms, and other content for toggling -->
? ? ? ? <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
? ? ? ? ? <ul class="nav navbar-nav">
? ? ? ? ? ? <li><a href="#">我要開店</a></li>?
? ? ? ? ? ??
? ? ? ? ? ? <!-- 商品模態(tài) -->
? ? ? ? ? ? ? ?<li>
? ? ? ? ? ? ? ?<button class="btn btn-primary" type="button">點擊我</button>
<div class="modal fade" id="mymodal">
? ? <div class="modal-dialog">
? ? ? ? <div class="modal-content">
? ? ? ? ? ? <div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模態(tài)彈出窗標題</h4>
</div>
<div class="modal-body">
<p>模態(tài)彈出窗主體內容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
? ? ? ? </li> ?
? ? ? ? ? ?</li>
? ? ? ? ? </ul>
? ? ??
? ? ? ? ? <ul class="nav navbar-nav navbar-right">
? ? ? ? ? ? ? ? <form class="navbar-form navbar-left" role="search">
? ? ? ? ? ? <div class="form-group">
? ? ? ? ? ? ? <input type="text" class="form-control" placeholder="搜索商品">
? ? ? ? ? ? </div>
? ? ? ? ? ? <button type="submit" class="btn btn-default">搜索</button>
? ? ? ? ? </form>
? ? ? ? ? ? <li class="user"> 賬號 <span class="glyphicon glyphicon-user"></li>
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ? <li class="shop">購物車 <span class="glyphicon glyphicon-shopping-cart"></span></li>
? ? ? ? ??
? ? ? ? ?</ul>
? ? ? ? </div><!-- /.navbar-collapse -->
? ? ? </div><!-- /.container-fluid -->
? ??
? ? </div><!-- /.container -->
? ?
? ?</nav>
?<!--內容-->
<div class="link">
? <div class="container">
? ? <ol class="breadcrumb">
? ? ? <li><a href="#">我的亞馬遜</a></li>
? ? ? <li><a href="#">Z秒殺</a></li>
? ? ?<li><a href="#">禮品卡</a></li>
? ? ?<li><a href="#">海外購</a></li>
? ? ?<li><a href="#">幫助</a></li>
? ? ?<li><a href="#">IN ENGLISH</a></li>
</ol>
?</div>
?</div>
?
?
?<!--banner-->
?
?<div id="myCarousel" class="carousel slide">
? ?<!-- 輪播（Carousel）指標 -->
? ?<ol class="carousel-indicators">
? ? ? <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
? ? ? <li data-target="#myCarousel" data-slide-to="1"></li>
? ? ? <li data-target="#myCarousel" data-slide-to="2">
? ? ? ? <div id="myCarousel2" class="carousel slide">
? ? ? ? ? <!-- 輪播（Carousel）指標 -->
? ? ? ? ? <ol class="carousel-indicators">
? ? ? ? ? ? <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
? ? ? ? ? ? <li data-target="#myCarousel" data-slide-to="1"></li>
? ? ? ? ? ? <li data-target="#myCarousel" data-slide-to="2"></li>
? ? ? ? ? </ol>
? ? ? ? ? <!-- 輪播（Carousel）項目 -->
? ? ? ? ? <div class="carousel-inner">
? ? ? ? ? ? <div class="item active"> <img src="../淘寶banner/bannertop.jpg" alt="First slide"> </div>
? ? ? ? ? ? <div class="item"> <img src="../淘寶banner/banner.jpg" alt="Second slide"> </div>
? ? ? ? ? ? <div class="item"> <img src="../淘寶banner/清涼一夏.jpg" alt="Third slide"> </div>
? ? ? ? ? </div>
? ? ? ? ? <!-- 輪播（Carousel）導航 -->
? ? ? ? ? <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a> </div>
? ? ? </li>
? ?</ol> ??
? ?<!-- 輪播（Carousel）項目 -->
? ?<div class="carousel-inner">
? ? ? <div class="item active">
? ? ? ? ?<img src="../淘寶banner/bannertop.jpg" alt="First slide">
? ? ? </div>
? ? ? <div class="item">
? ? ? ? ?<img src="../淘寶banner/banner.jpg" alt="Second slide">
? ? ? </div>
? ? ? <div class="item">
? ? ? ? ?<img src="../淘寶banner/清涼一夏.jpg" alt="Third slide">
? ? ? </div>
? ?</div>
? ?<!-- 輪播（Carousel）導航 -->
? ? ??
? ? ? <a class="carousel-control left" href="#myCarousel" data-slide="prev">
? ? ? <span class="glyphicon glyphicon-chevron-left"></span></a>
? ? <a class="carousel-control right" href="#myCarousel" data-slide="next">
? ? <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>?
<script type="text/javascript" src="bootstrap/bootstrap-3.3.5/js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap-3.3.5/js/transition.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap-3.3.5/js/modal.js"></script>
<script>
? $(function(){
? ? $(".btn").click(function(){
? ? ? $("#mymodal").modal("toggle");
? ? });
? });
</script>
</body>
</html>
2016-06-25
是布置z-index設置的不合理~