我需要帮助处理我在代码底部添加的模式。不确定我是否错误地附加了它们，或者模态代码本身是错误的。请帮忙！！！
<!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>Jane Doette</title>
<script type="text/javascript" href="jquery-3.0.0.js"></script>
<script type="text/javascript" href="bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="JaneDoette.css">
<link href='https://fonts.googleapis.com/css?family=Lato:300'
rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="title-logo"
src="file:///Users/Diana/Documents/fvlogo.gif" class="img-responsive"
alt="responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="title-super text-thin">Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img
src="file:///Users/Diana/Documents/testhtml1140x350.jpg" class="img-
responsive" alt="responsive image">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-muted">Featured Work</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img src="file:///Users/Diana/Documents/450x300Type.jpg"
class="img-responsive" alt="responsive image">
<h3>Type</h3>
<p>
<button type="button" class="btn" data-toggle="modal"
data-target="#project1">Launch Demo Modal</button>
</p>
</div>
<div class="col-md-4">
<img
src="file:///Users/Diana/Documents/450x300wallpaper.jpg"
class="img-responsive" class="img-responsive"
alt="responsive image">
<h3>Wallpaper</h3>
<p>
<button type="button" class="btn" data-toggle="modal"
data-target="#project1">Launch Demo Modal</button>
</p>
</div>
<div class="col-md-4">
<img src="file:///Users/Diana/Documents/450x300print.jpg"
class="img-responsive" class="img-responsive"
alt="responsive image">
<h3>Print</h3>
<p>
<a href="http://github.com">Link to project</a>
</p>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-
target="#project1">
</button>
<!-- Modal1 -->
<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Type</h4>
</div>
<div class="modal-body">
<img src="file:///Users/Diana/Documents/450x300Type.jpg"
class="img-responsive" alt="responsive image">
<p> This was my first project in this class. I learned a
lot about HTML and CSS. The portfolio page looks nice,
but there really isn't that much info about your
projects. but putting a lot of text under the image
wouldn't look nice. So adding a modal would be the best
way to do this. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes
</button>
</div>
</div>
</div>
</div>
<!--Modal2-->
<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Type</h4>
</div>
<div class="modal-body">
<img
src="file:///Users/Diana/Documents/450x300Wallpaper.jpg"
class="img-responsive" alt="responsive image">
<p> This was my first project in this class. I learned a
lot about HTML and CSS. The portfolio page looks nice,
but there really isn't that much info about your
projects. but putting a lot of text under the image
wouldn't look nice. So adding a modal would be the best
way to do this. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes
</button>
</div>
</div>
</div>
</div>
<!--Modal3-->
<div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Type</h4>
</div>
<div class="modal-body">
<img src="file:///Users/Diana/Documents/450x300Print.jpg"
class="img-responsive" alt="responsive image">
<p> This was my first project in this class. I learned a
lot about HTML and CSS. The portfolio page looks nice,
but there really isn't that much info about your
projects. but putting a lot of text under the image
wouldn't look nice. So adding a modal would be the best
way to do this. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes
</button>
</div>
</div>
</div>
</div>
</body>
</html>
我需要一个按钮或图像附加到模态，我已尝试过两者，似乎都不起作用。
答案 0 :(得分：1)
通过'将按钮附加到模态'很难理解你的意思，因为我能够在JSFiddle中打开模态，但是我看到你的标记中有一些我认为可能有帮助的错误你出去了：
id属性（它们都是project1）。 id必须是唯一的。id属性都是唯一的，请将按钮元素的data-target属性更改为相应的模态id。doctype声明不完整。答案 1 :(得分：0)
首先，您应该为每个模态提供单独的ID。
我假设你已添加 bootstrap.min.css，jquery.min.js和bootstrap.min.js
您的HTML应该是这样的，
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>