Multiple Modal same page - css

Question

i've this page http://steam-to-rent.ch/mietdampfanlagen2.html with Bootstrap collapse and modal. The problem is that when you click on "Anfrage" (The yellow button) the modal appears and works correctly, but when you try to close it i can't interact with the page anymore. How can i solve it? this is the code:
<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 [phone]<br>Fax [phone]<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>

Answer 1

You made small mistakes.
You gave both modal same class (bs-example-modal-sm) name and calling them by the button by same name. That is why you facing the problem
You rather use ID instead of class to call it. For example - id="modal-1" and "modal-2".
And change replace the name on button
<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>
See the change is 'data-target'. I replaced the ID on class name you used.
Above is right and in addition to this also you can able to provide close sign in the header on click of that modal get closed.
<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>