Bootstrap模态框问题

Question

Bootstrap模态框问题

htmltwitter-bootstraptwitter-bootstrap-3

4

我这里有两个 Bootstrap 模态框，一个用于发送消息，另一个用于分享。每个模态框都由不同的链接元素触发。问题是，一次只有一个模态框似乎有效。因此，如果我删除第一个模态框，则第二个模态框开始显示。有人可以帮忙解决一下这到底是怎么回事吗？

以下是代码：

 <!-- 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"/></span></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>

  

<!-- /SHARE MODAL -->


<!-- MESSAGE ME MODAL -->
 <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 -->

- user3772369

你所说的“一个接一个”是什么意思？你需要同时显示它们吗？ - jsanchezs

很抱歉造成误解。因此，两个模态框是由两个单独的链接触发的。共享模态框无论如何都可以运行。但要使消息模态框起作用，我必须删除共享模态框的所有代码。 - user3772369

没问题，很高兴你找到了答案。 - jsanchezs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Randall Valenciano · Accepted Answer

你分享的模态框在结构上有错误的闭合标签。

你可以试试这个？

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

使用您原始的共享模态框的替代方案？