我的这个页面http://steam-to-rent.ch/mietdampfanlagen2.html有Bootstrap崩溃和模态。问题是当你点击＆＃34; Anfrage＆＃34; （黄色按钮）模态显示并正常工作，但当您尝试关闭它时，我无法再与页面进行交互。我怎么解决呢？这是代码：
<div class="col-lg-12 table1">
<div id="printableArea">
<img class="logo_print logo1" src="img/logo.png" alt="" height="90" width="130" />
<p class="stampa stampa_ipad">Gewerbe Bölli<br>Böllistrasse 18<br>CH - 5072 Oeschgen<br>Tel 062 866 16 88<br>Fax 062 866 16 99<br>info@z-ag.ch</p>
<button class="btn" data-parent="tableParent" data-toggle="collapse" data-target="#table1" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">Mietdampfanlage 21 kg/h 10 bar</button>
<div id="table1" class="collapse">
<table class="table table-striped table-bordered table-hover" width="744">
<thead>
<tr>
<th style="text-align: center;">Kriterium</th>
<th style="text-align: center;">Einheit</th>
<th style="text-align: center;">Grösse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dampfleistung</td>
<td>kg/h</td>
<td>21</td>
</tr>
<tr>
<td>Abmessungen (L x B x H)</td>
<td>mm</td>
<td>1020 x 600 x 1370</td>
</tr>
<tr>
<td>Gewicht</td>
<td>kg</td>
<td>140</td>
</tr>
<tr class="">
<td>Medium</td>
<td>–</td>
<td>Sattdampf</td>
</tr>
<tr class="">
<td>Ansprechdruck SV</td>
<td>bar</td>
<td>6,0</td>
</tr>
<tr class="">
<td>Einstellbereich Kessel</td>
<td>bar</td>
<td>1,0 – 5,0</td>
</tr>
<tr class="">
<td>max. Betriebsdruck</td>
<td>bar</td>
<td>5,0</td>
</tr>
<td>Fabr. Nr. </td>
<td>–</td>
<td>21.301.112 / 05-09</td>
</tr>
<td>Gesamtanschluss</td>
<td>kW</td>
<td>elektrisch, 15 kW</td>
</tr>
<td>Stromanschluss</td>
<td>A / V</td>
<td>CEE 32A, 5-polig / 400 V</td>
</tr>
<td>Wasserenthärtung</td>
<td>–</td>
<td>separat mietbar</td>
</tr>
<td>Frostschutzsicherung</td>
<td>–</td>
<td>keine</td>
</tr>
<td>Mobilität</td>
<td>–</td>
<td>fahrbar</td>
</tr>
<td>Flexible Anschlussleitungen</td>
<td>–</td>
<td>nach Bedarf</td>
</tr>
<td>Wasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / AG</td>
</tr>
<td>Abwasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / IG</td>
</tr>
<td>Dampfanschluss</td>
<td>Zoll</td>
<td>3/4" / IG</td>
</tr>
</tbody>
<input class="printer" type="button" onclick="printDiv('printableArea')" value="Drucken" />
</table>
<button id="modal_1" type="button" class="btn btn-primary special" style="background: #fadf3e; border: 2px solid #000; color: #000; margin-bottom: 20px; margin-top: -10px; width: 100%;" data-toggle="modal" data-target=".bs-example-modal-sm" data-keyboard="true" data-backdrop="static" >Anfrage</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="row">
<div class="col-sm-12 form">
<div class="modal-header">
<h4 style="color: #000;">Mietdampfanlage 21 kg/h 10 bar</h4>
</div>
<form class="form-modal" role="form" method="post" action="index.php">
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="firma" placeholder="Firma" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="text" class="form-control" id="name" name="telefon" placeholder="Telefon" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input type="text" class="form-control" id="name" name="zeit" placeholder="Zeitraum" value="">
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
</div>
</div>
<div class="col-sm-12 ">
<div class="form-group">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
你犯了小错误。
您给了两个模态相同的类（bs-example-modal-sm）名称，并通过相同名称的按钮调用它们。这就是你面临问题的原因
您更愿意使用ID而不是类来调用它。例如 - id="modal-1"和“modal-2”。
然后更改替换按钮上的名称
<button id="modal_2" type="button" class="btn btn-primary special" style="background: #fadf3e; border: 2px solid #000; color: #000; margin-bottom: 20px; margin-top: -10px; width: 100%;" data-toggle="modal" data-target="#modal-1">Anfrage</button>
看到更改为“data-target”。我替换了您使用的类名上的ID。
上面是正确的，除此之外，您还可以在单击该模式时关闭标题。
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-hidden="true"
id="close" align="right">x</button>
<h4 class="modal-title" id="myModalLabel">Mietdampfanlage 21 kg/h 10 bar</h4>
</div>