多个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模块在同一页

回答

相关问题