Bootstrap模態問題

Question

我在這裏有2個引導模態。一個用於發送消息，另一個用於共享。每個模式都由不同的鏈接元素觸發。問題是，一次只有一種模式似乎起作用。所以如果我刪除第一個，第二個開始顯示。有人能幫助這裏發生了什麼嗎？

這裏是

<!-- SHARE Modal --> 
 

 
<!-- Modal --> 
 
<div id="shareModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     
 
     <!-- modal header content --> 
 
     \t <div class="row"> 
 
      \t <div class="col-sm-2"> <img class="" src="images/poster-image - Modal.jpg"/> </div><!-- /col-sm- 1 --> 
 
       
 
       <div class="col-sm-10"> <h4 class="modal-title txt-highlighted">Share this post</h4> </div><!-- /col-sm-11 --> 
 
      </div><!-- end row--> 
 
     <!-- /modal header content --> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <!--Modal body Content --> 
 
     \t <div class="row"> 
 
      \t <div class="col-sm-9">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
 
has been the industry's standard dummy text ever since the 1500s, when an unknown 
 
printer took a galley of type and scrambled it to make a type specimen book. </div> 
 

 
\t \t \t <!-- modal pic --> 
 
      <div class="col-sm-3 " style="padding-left:7%;"><span class="img-product-modal-frame"><img src="images/img-product.jpg"/> </span> </div> 
 
      <!-- modal pic --> 
 
      </div> 
 
     <!-- Modal body Content --> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <!-- Modal Footer content --> 
 
     <div class="row"> 
 
     <!-- footer left section --> 
 
     \t <div class="col-sm-10"> 
 
     \t <div class="col-sm-2 text-left no-padd-left"> Share on my </div> 
 
      <div class="col-sm-2"> 
 
     \t <div class="checkbox-inline"> <input type="checkbox" class="modal-checkbox "/><img src="images/fb-grey.gif"/></span></div></div><!-- col-sm-2--> 
 
      <div class="col-sm-2"> 
 
     \t <div class="checkbox-inline"> <input type="checkbox"/> <img src="images/twitter-grey.gif"/></div></div><!-- col-sm-2--> 
 
      <div class="col-sm-2"> 
 
     \t <div class="checkbox-inline"> <input type="checkbox"/> <img src="images/linkedin-grey.gif"/></div></div><!-- col-sm-2--> 
 
     
 
     </div><!--/footer left section --> 
 
     
 
     <div class="col-sm-2"><button type="button" class="btn btn-default" data-dismiss="modal">Share</button> </div><!-- footer right section --> 
 
     </div> 
 
     <!-- /Modal Footer content --> 
 
     
 
     
 
     </div> 
 
    </div> 
 

 
    
 

 
<!-- /SHARE MODAL --> 
 

 

 
<!-- MESSAGE ME MODAL --> 
 
\t <div id="messageModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     Close 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 
<!-- /MESSAGE ME MODAL -->

Answer 1

您共享模式在其組成不正確關閉標籤的代碼。

你可以試試嗎？

<!-- SHARE Modal --> 

<!-- Modal --> 
<div id="shareModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 

     <!-- modal header content --> 
     <div class="row"> 
      <div class="col-sm-2"> <img class="" src="images/poster-image - Modal.jpg"/> </div><!-- /col-sm- 1 --> 

      <div class="col-sm-10"> <h4 class="modal-title txt-highlighted">Share this post</h4> </div><!-- /col-sm-11 --> 
      </div><!-- end row--> 
     <!-- /modal header content --> 
     </div> 
    <div class="modal-body"> 
    <!--Modal body Content --> 
     <div class="row"> 
     <div class="col-sm-9">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown 
printer took a galley of type and scrambled it to make a type specimen book. 
     </div> 

     <!-- modal pic --> 
     <div class="col-sm-3 " style="padding-left:7%;"><span class="img-product-modal-frame"><img src="images/img-product.jpg"/> </span> 
     </div> 
     <!-- modal pic --> 
     </div> 
     <!-- Modal body Content --> 
     </div> 
     <div class="modal-footer"> 
     <!-- Modal Footer content --> 
     <div class="row"> 
     <!-- footer left section --> 
      <div class="col-sm-10"> 
      <div class="col-sm-2 text-left no-padd-left"> 
       Share on my 
      </div> 
      <div class="col-sm-2"> 
       <div class="checkbox-inline"> 
       <input type="checkbox" class="modal-checkbox "/><img src="images/fb-grey.gif"/> 
       </div> 
      </div><!-- col-sm-2--> 
      <div class="col-sm-2"> 
       <div class="checkbox-inline"> 
       <input type="checkbox"/> <img src="images/twitter-grey.gif"/> 
       </div> 
      </div><!-- col-sm-2--> 
       <div class="col-sm-2"> 
       <div class="checkbox-inline"> 
        <input type="checkbox"/> <img src="images/linkedin-grey.gif"/> 
       </div> 
       </div><!-- col-sm-2--> 

     </div><!--/footer left section --> 

     <div class="col-sm-2"><button type="button" class="btn btn-default" data-dismiss="modal">Share</button> </div><!-- footer right section --> 
     </div> 
     <!-- /Modal Footer content --> 
     </div> 
    </div> 
    </div> 
</div> 

<!-- /SHARE MODAL --> 

而不是你原來的共享模態？