因此，我正在为大学项目建立一个基本的“书店”网站。我试图使您在按书的“详细信息”按钮时弹出一个弹出窗口并显示该信息，并且用户可以“添加到购物车”或关闭该弹出窗口。我可能缺少了一些似乎看不到的小东西。
这是index.php的代码
<!DOCTYPE html>
<html>
<head>
<title>Books 101 Shop</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/main.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container">
<a href="index.php" class="navbar-brand" id="text">Books 101</a>
<ul class="nav navbar-nav">
<!--DROP DOWN MENU-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Genre<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Fantasy</a></li>
<li><a href="#">Detective</a></li>
<li><a href="#">Romance</a></li>
</ul>
</ul>
</div>
</nav>
<!--INSERTING IMAGES-->
<div id="background-image">
<div id="image-1"></div>
<div id="image-2"></div>
</div>
<!--REMOVE THE SPACES AND CENTER THE PRODUCTS-->
<div class="col-md-2"></div>
<!-- MAIN CONTENT OF FEATURED PRODUCTS-->
<div class="col-md-8">
<div class="row">
<h2 class="text-center">Featured Books</h2>
<div class="col-md-3">
<h4>The Witcher</h4>
<img src="images/fantasy.jpg" alt="The Witcher" id="images"/>
<p class="list-price text-danger">List Price: <s>$29.99</s></p>
<p class="price">Our price: $19.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-1">Details</button>
</div>
<div class="col-md-3">
<h4>Lord Of The Rings</h4>
<img src="images/lordoftherings.jpg" alt="LotR" id="images"/>
<p class="list-price text-danger">List Price: <s>$24.99</s></p>
<p class="price">Our price: $19.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-2">Details</button>
</div>
<div class="col-md-3">
<h4>50 Shades of Gray</h4>
<img src="images/shadesofgray.jpg" alt="50 Shades of Gray" id="images"/>
<p class="list-price text-danger">List Price: <s>$19.99</s></p>
<p class="price">Our price: $9.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-3">Details</button>
</div>
<div class="col-md-3">
<h4>Sherlock Holmes</h4>
<img src="images/sherlock.jpg" alt="Sherlock Holmes" id="images"/>
<p class="list-price text-danger">List Price: <s>$29.99</s></p>
<p class="price">Our price: $19.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-4">Details</button>
</div>
<div class="col-md-3">
<h4>The Hobbit</h4>
<img src="images/the_hobbit.jpg" alt="The Hobbit" id="images"/>
<p class="list-price text-danger">List Price: <s>$29.99</s></p>
<p class="price">Our price: $19.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-5">Details</button>
</div>
</div>
</div>
<!--DETAILS MODAL-->
<?php include 'details-modal-witcher.php';
// include 'details-modal-lotr.php';
// include 'details-modal-shadesofgray.php';
// include 'details-modal-sherlock.php';
// include 'details-modal-hobbit.php';
?>
<!--DETAILS MODAL END-->
<footer class="text-center" id="footer">© Copyright Books 101</footer>
</body>
</html>
下面是执行紧急操作的代码：
<div class="modal fade details-1" id="details-1" tableindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">The Witcher</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="center-block">
<img src="images/fantasy.jpg" alt="The Witcher" class="details img-responsive"/>
</div>
</div>
<div class="col-sm-6">
<h4>Details</h4>
<p>One of the best fantasy books in the market</p>
<hr/>
<p>Price: $19.99</p>
<p>Writer: Sapkowski</p>
<form action="add_cart.php" method="post">
<div class="form-group">
<div class="col-xs-3">
<label for="quantity" id="quantity-label">Quantity:</label>
<input type="text" class="form-control" id="quantity" name="quantity"/>
</div><br />
<div class="form-group">
<label for="size">Cover:</label>
<select name="size" id="size" class="form-control">
<option value=""></option>
<option value="Hardcover">Hardcover</option>
<option value="Softcover">Softcover</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span>Add To Cart</button>
</div>
</div>
</div>
答案 0 :(得分：0)
问题仅在于按钮及其对应的模式之间的链接。像这样添加前面的＃：
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#details-1">
Details
</button>
<!DOCTYPE html>
<html>
<head>
<title>Books 101 Shop</title>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container">
<a href="index.php" class="navbar-brand" id="text">Books 101</a>
<ul class="nav navbar-nav">
<!--DROP DOWN MENU-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Genre<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Fantasy</a></li>
<li><a href="#">Detective</a></li>
<li><a href="#">Romance</a></li>
</ul>
</ul>
</div>
</nav>
<!--INSERTING IMAGES-->
<div id="background-image">
<div id="image-1"></div>
<div id="image-2"></div>
</div>
<!--REMOVE THE SPACES AND CENTER THE PRODUCTS-->
<div class="col-md-2"></div>
<!-- MAIN CONTENT OF FEATURED PRODUCTS-->
<div class="col-md-8">
<div class="row">
<h2 class="text-center">Featured Books</h2>
<div class="col-md-3">
<h4>The Witcher</h4>
<img src="https://via.placeholder.com/150" alt="The Witcher" id="images"/>
<p class="list-price text-danger">List Price: <s>$29.99</s></p>
<p class="price">Our price: $19.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#details-1">Details</button>
</div>
<div class="col-md-3">
<h4>Lord Of The Rings</h4>
<img src="https://via.placeholder.com/150" alt="LotR" id="images"/>
<p class="list-price text-danger">List Price: <s>$24.99</s></p>
<p class="price">Our price: $19.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-2">Details</button>
</div>
<div class="col-md-3">
<h4>50 Shades of Gray</h4>
<img src="https://via.placeholder.com/150" alt="50 Shades of Gray" id="images"/>
<p class="list-price text-danger">List Price: <s>$19.99</s></p>
<p class="price">Our price: $9.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-3">Details</button>
</div>
<div class="col-md-3">
<h4>Sherlock Holmes</h4>
<img src="https://via.placeholder.com/150" alt="Sherlock Holmes" id="images"/>
<p class="list-price text-danger">List Price: <s>$29.99</s></p>
<p class="price">Our price: $19.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-4">Details</button>
</div>
<div class="col-md-3">
<h4>The Hobbit</h4>
<img src="https://via.placeholder.com/150" alt="The Hobbit" id="images"/>
<p class="list-price text-danger">List Price: <s>$29.99</s></p>
<p class="price">Our price: $19.99</p>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="details-5">Details</button>
</div>
</div>
</div>
<!--DETAILS MODAL-->
<div class="modal fade details-1" id="details-1" tableindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">The Witcher</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="center-block">
<img src="images/fantasy.jpg" alt="The Witcher" class="details img-responsive"/>
</div>
</div>
<div class="col-sm-6">
<h4>Details</h4>
<p>One of the best fantasy books in the market</p>
<hr/>
<p>Price: $19.99</p>
<p>Writer: Sapkowski</p>
<form action="add_cart.php" method="post">
<div class="form-group">
<div class="col-xs-3">
<label for="quantity" id="quantity-label">Quantity:</label>
<input type="text" class="form-control" id="quantity" name="quantity"/>
</div>
<br />
<div class="form-group">
<label for="size">Cover:</label>
<select name="size" id="size" class="form-control">
<option value=""></option>
<option value="Hardcover">Hardcover</option>
<option value="Softcover">Softcover</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span>Add To Cart</button>
</div>
</div>
</div>
<!--DETAILS MODAL END-->
<footer class="text-center" id="footer">© Copyright Books 101</footer>
</body>
</html>