Bootstrap boot error

Question

I have 2 boot modules. One is used to send a message, and the other is for sharing. Each modal is triggered by a different communication element. The problem is that only one modal works at a time. Therefore, if I delete the first, the second will start showing. Can someone please help what's going on here?

Here is the code

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

Run codeHide result

Answer 1

Your general modal has invalid closing tags in its composition.

Can you try this?

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

instead of the original fashion?