多個Bootstrap模塊在同一頁

我正在http://steam-to-rent.ch/mietdampfanlagen.html上工作。正如你所看到的，我正在使用Bootstrap collapse，當你點擊「Anfrage」按鈕時，它顯示一個Bootstrap的模態。問題是，當你點擊第二個「模式按鈕」（Anfrage），然後關閉該模式時，背景疊加層顏色仍然存在，我無法與頁面交互。我該如何解決它？多個Bootstrap模塊在同一頁

這是代碼

<button 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">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"> 
     <h4 style="color: #000;">Mietdampfanlage 21 kg/h 10 bar</h3> 
     <div class="col-sm-12 form"> 
      <form class="form-modal" role="form" method="post" action="index.php"> 
     <div class="form-group" style="margin-bottom: 15px !important;">  
      <div class="col-sm-12"> 
       <input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value=""> 
      </div> 
     </div> 
     <div class="form-group" style="margin-bottom: 15px !important;"> 
      <div class="col-sm-12 "> 
       <input type="text" class="form-control" id="name" name="firma" placeholder="Firma" value=""> 
      </div> 
     </div> 
     <div class="form-group" style="margin-bottom: 15px !important;"> 
      <div class="col-sm-12 "> 
       <input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value=""> 
      </div> 
     </div> 
     <div class="form-group" style="margin-bottom: 15px !important;"> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control" id="name" name="telefon" placeholder="Telefon" value=""> 
      </div> 
     </div> 

     <div class="form-group" style="margin-bottom: 15px !important;"> 
      <div class="col-sm-12"> 
       <input type="text" class="form-control" id="name" name="zeit" placeholder="Zeitraum" value=""> 
      </div> 
     </div> 

     <div class="form-group" style="margin-bottom: 15px !important;"> 
      <div class="col-sm-12"> 
       <textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea> 
      </div> 
     </div> 
     <div class="form-group" style="margin-bottom: 15px !important;"> 
      <div class="col-sm-12"> 
       <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary"> 
      </div> 
     </div> 
     <div class="form-group" style="margin-bottom: 15px !important;"> 
      <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>

編輯：

<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">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" style="margin-bottom: 15px !important;"> 
       <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>

來源

2015-10-06 Antonioz

可能的重複：http://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear – CodeRomeos

-1

data-backdrop="static" 
data-keyboard="false"

先看看，看看是否有數據，背景= 「靜態」的任何地方。這將做到這一點。還要確保數據鍵盤不爲假，以確保您可以進行交互。

最後，我希望你看看按鈕和模式上的ID。確保它們都是不同的。我沒有看到這種模式在這裏的身份證，所以我會建議像

id="modal_1"

上的按鈕和模態。確保它匹配

來源

2015-10-06 15:44:57 fballer87

多個Bootstrap模塊在同一頁

回答

相關問題