多模態相同頁面

Question

我已將此頁http://steam-to-rent.ch/mietdampfanlagen2.html與Bootstrap崩潰和模態。問題是，當你點擊「Anfrage」（黃色按鈕）模式出現並正常工作，但是當你嘗試關閉它時，我無法再與頁面交互。我如何解決它？這是代碼：

<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> 

Answer 1

你犯了小錯誤。

您給出了兩個模態相同的類（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>