我写了一个网页，其中包含一个这样的表：
当用户单击RFP＃时，将出现一个模态弹出窗口，如下所示：
当用户完成并提交表格后，将出现一个下载链接，他们可以在其中下载RFP的pdf。
我的问题是其他模式不能正常运行。第一个模式可以正常工作：完成并提交表单后，出现下载按钮，并发送电子邮件。我怀疑这可能是实现模态的方式：我刚制作了一个模态，复制并粘贴以创建更多模态，然后更改id和data-target。顺便说一句，我正在A2Hosting托管的网站上进行此操作。
这是我的代码：
<table class="table table-bordered" style="text-align:center; background-color:aliceblue">
<thead>
<tr style="text-align:center">
<th scope="col">RFP #</th>
<th scope="col">Description of RFP</th>
<th scope="col">End Date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight:700"><a href="#" data-toggle="modal" data-target="#modal1">RFP19-CHCC-GSS-015</a></td>
<td><a href="#">Pest Control Services</a></td>
<td>07/24/2019</td>
</tr>
<tr>
<td style="font-weight:700"><a href="#" data-toggle="modal" data-target="#modal2">RFP19-CHCC-CGC-CCP-017</a></td>
<td><a href="#">Crisis Counseling Program</a></td>
<td>07/23/2019</td>
</tr>
</tbody>
</table>
<!-- Modals Start-->
<div id="modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="text-align:center; margin-top:20px">
Contact Us
</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<p> Send your message in the form below and we will get back to you as early as possible. </p>
<div class="form-group">
<label for="name"> Name:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="phone"> Phone Number:</label>
<input type="tel" class="form-control" id="phone" name="phone" required maxlength="50">
</div>
<div class="form-group">
<label for="message"> Message:</label>
<textarea class="form-control" type="textarea" name="message" id="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h3>Sent your message successfully!</h3>
<a href="docs/RFP/test.pdf" download="RFP19.pdf">
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</a>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
</div>
<div id="modal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div>
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="text-align:center; margin-top:20px">
Contact Us
</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<p> Send your message in the form below and we will get back to you as early as possible. </p>
<div class="form-group">
<label for="name"> Name:</label>
<input type="text" class="form-control" id="name" name="name" required maxlength="50">
</div>
<div class="form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email" name="email" required maxlength="50">
</div>
<div class="form-group">
<label for="phone"> Phone Number:</label>
<input type="tel" class="form-control" id="phone" name="phone" required maxlength="50">
</div>
<div class="form-group">
<label for="message"> Message:</label>
<textarea class="form-control" type="textarea" name="message" id="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h3>Sent your message successfully!</h3>
<a href="docs/RFP/test.pdf" download="RFP19.pdf">
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Submit →</button>
</a>
</div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
使其正常工作。我没有意识到我必须更改某些模态组件的ID。