Bootstrap模式仅在有时打开

Question

So I am having problem with my bootstrap modal. I have it within an accordion and it works perfect in the first accordion panel but in the second one it doesn't work on any of the elements. Now, here is where it gets a little tricky, it works ONLY IF both panels are open. So if I leave the first accordion panel open the modal will work within the second accordion panel. However, if the first is collapsed it doesn't show up.

Here is an example of the code in the first panel:

    <div id="accordion" class="panel-group panel">
    <div class="panel panel-default">
     <div class="panel-heading">
       <a data-toggle="collapse" data-parent="accordion" href="#collapseOne">
         <img class="human icon-1" src="code/img/cyclone.jpg" alt="human"></a>
          <h4 class="panel-title">
             <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
            <img class="arrow" src="code/img/arrow.jpg"></a>
            </h4>
            <a data-toggle="collapse" data-parent="accordion" 
             href="#collapseOne"><div class="human_rights">Humanitarian 
             Crises</div></a>
        </div>
   <div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
     <div class="col-sm-12">

         <div class="container">    
          <div class="col-sm-3">
          <div class="row">

          </div>    
            <p class="para">Podcasts relating to the rights and protections of 
              persons at risk, from civilians in conflict zones to refugees and 
                asylum seekers on the move</p>
            </div>
          </div>
       </div>

                <img class="pod-pic col-sm-12" src="code/img/unicef_radio.jpg">  


                <div class="col-sm-10">

    <p class="para-head">UNICEF Podcast</p>
    <div class="sub-header">By: UNICEF</div>
    <div>
        <div class="col-sm-10">
          <p class="para">A new global radio service from UNICEF focusing on the 
        health, education, equality and protection of children. Hosted by Blue 
       Chevigny with UNICEF correspondents from around the globe.</p>
        <a href="https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?
         mt=2"><img class="itunes" src="code/img/music_icon.jpg"></a>
        <img class="rss" src="code/img/rss_icon.jpg">
        <img class="share" src="code/img/share_icon.jpg" data-toggle="modal" 
    data-target="#myModal">
    <div class="modal fade" id="myModal" 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">Share This Podcast</h4>
         </div>
     <div class="modal-body">

          <a class="icon_display" href="http://www.facebook.com/sharer.php?
        u=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2" 
        target="_blank"><img class="facebook modal_share" 
        src="code/img/facebook.png"></a>


   <a class="icon_display" href="https://twitter.com/share?
    url=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?
    mt=2&amp;text=UNICEF%20Podcast%20By: UNICEF&amp;hashtags=ReliefWeb" 
    target="_blank"><img class="twitter modal_share" src="code/img/twitter.png">
    </a>


    <a class="icon_display" href="https://plus.google.com/share?
    url=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2" 
    target="_blank"><img  class="google modal_share" src="code/img/google.png">
    </a>
     <a class="icon_display" href="http://www.linkedin.com/shareArticle?
     mini=true&url=https://itunes.apple.com/us/podcast/unicef-
     podcast/id77700259?mt=2"><img  class="linkedin modal_share" 
     src="code/img/linkedin.png"></a>
     </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default modal_btn" data-
        dismiss="modal">Close</button>
          </div>
          </div>                          
         </div>
      </div> <!-- Modal End -->



And here is an example of the code for the second:

    <div class="panel panel-default panel-two">
        <div class="panel-heading">

            <a data-toggle="collapse" data-parent="accordion" 
    href="#collapseTwo"><img class="human" src="code/img/humanitarian-
    learning.jpg" alt="mac"></a>
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><img class="arrow" src="code/img/arrow.jpg"></a>
            </h4>

      <a data-toggle="collapse" data-parent="accordion" href="#collapseTwo"><div 
     class="human_rights">Humanitarian Learning</div></a>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
      <div class="col-sm-12">
      <p class="description-para"> Podcasts to listen and learn about 
    humanitarian issues, find out about opportunities, develop new skills and 
    brush up on old ones.</p>
            </div>
     <img class="pod-pic col-sm-8" src="code/img/laws_of_war.jpg" data-
     toggle="modal" data-target="#myModal">
    <div class="col-sm-10">
    <p class="para-head">Laws of War</p>
    <div class="sub-header">By: Australian RedCross</div>
     <div class="col-sm-10">
     <p class="para">In this podcast, eminent academics and lawyers unpack the 
     laws of war, drawing on examples from Syria to South Sudan, Ukraine to the 
     United States.</p><a href="https://itunes.apple.com/au/podcast/laws-of-
     war/id1020576810?mt=2"><img class="itunes itune_bottom" 
     src="code/img/music_icon.jpg"></a>
    <img class="rss rss_bottom" src="code/img/rss_icon.jpg">
    <img class="share" src="code/img/share_icon.jpg" data-toggle="modal" data-
     target="#myModal">
     <div class="modal fade" id="myModal" 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">Share This Podcast</h4>
         </div>
        <div class="modal-body">

        <a class="icon_display" href="http://www.facebook.com/sharer.php?
        u=https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?mt=2" 
        target="_blank"><img class="facebook modal_share" 
        src="code/img/facebook.png"></a>



        <a class="icon_display" href="https://twitter.com/share?
        target="_blank"><img class="twitter modal_share" 
        src="code/img/twitter.png"></a>


     <a class="icon_display" 
     href="https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?mt=2" 
     target="_blank"><img  class="google modal_share" src="code/img/google.png">
     </a>
     <a class="icon_display" 
     href="http://www.linkedin.com/shareArticle?
     mini=true&url=https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?
     mt=2"><img  class="linkedin modal_share" src="code/img/linkedin.png"></a>
    </div>
     <div class="modal-footer">
    <button type="button" class="btn btn-default modal_btn" data-dismiss="modal">Close</button>
      </div>
    </div>
   </div>
   </div> <!-- Modal End -->

Answer 1

First of all there are couple of things you need to do if you have copy pasted the code.

• Put modal at the top level ie directly with the body.
• Remove Unnecessary space from the data- attribute ie from data- toggle , data- target etc. Check for all.
• If both the popup have same data then use the same modal with jQuery and listen to the show.bs.modal event and then manipulate the data else in data target change the id of modal.

In case of any query comment below and before that copy past below code in an simple html file and check the output or run the below snippet.

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> <div class="modal fade" id="myModal1" 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">Share This Podcast</h4> </div> <div class="modal-body"> <a class="icon_display" href="http://www.facebook.com/sharer.php?u=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2" target="_blank"> <img class="facebook modal_share" src="code/img/facebook.png"> </a> <a class="icon_display" href="https://twitter.com/share?url=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2&amp;text=UNICEF%20Podcast%20By: UNICEF&amp;hashtags=ReliefWeb" target="_blank"> <img class="twitter modal_share" src="code/img/twitter.png"> </a> <a class="icon_display" href="https://plus.google.com/share?url=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2" target="_blank"> <img class="google modal_share" src="code/img/google.png"> </a> <a class="icon_display" href="http://www.linkedin.com/shareArticle?mini=true&url=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2"> <img class="linkedin modal_share" src="code/img/linkedin.png"> </a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default modal_btn" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal End --> <div class="modal fade" id="myModal2" 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">Share This Podcast</h4> </div> <div class="modal-body"> <a class="icon_display" href="http://www.facebook.com/sharer.php?u=https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?mt=2" target="_blank"> <img class="facebook modal_share" src="code/img/facebook.png"> </a> <a class="icon_display" href="https://twitter.com/share?" target="_blank"> <img class="twitter modal_share " src="code/img/twitter.png "> </a> <a class="icon_display" href="https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?mt=2" target="_blank "> <img class="google modal_share " src="code/img/google.png "> </a> <a class="icon_display" href="http://www.linkedin.com/shareArticle? mini=true&url=https://itunes.apple.com/au/podcast/laws-of-war/id1020576810? mt=2 "> <img class="linkedin modal_share " src="code/img/linkedin.png "> </a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default modal_btn " data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Modal End --> <div class="container-fluid"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="accordion" href="#collapseOne"> <img class="human icon-1" src="code/img/cyclone.jpg" alt="human"></a> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <img class="arrow" src="code/img/arrow.jpg"></a> </h4> <a data-toggle="collapse" data-parent="accordion" href="#collapseOne"> <div class="human_rights">Humanitarian Crises</div> </a> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <div class="col-sm-12"> <div class="container"> <div class="col-sm-3"> <div class="row"></div> <p class="para">Podcasts relating to the rights and protections of persons at risk, from civilians in conflict zones to refugees and asylum seekers on the move </p> </div> </div> </div> <img class="pod-pic col-sm-12" src="code/img/unicef_radio.jpg"> <div class="col-sm-10"> <p class="para-head">UNICEF Podcast</p> <div class="sub-header">By: UNICEF</div> <div> <div class="col-sm-10"> <p class="para">A new global radio service from UNICEF focusing on the health, education, equality and protection of children. Hosted by Blue Chevigny with UNICEF correspondents from around the globe. </p> <a href="https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2"> <img class="itunes" src="code/img/music_icon.jpg"> </a> <img class="rss" src="code/img/rss_icon.jpg"> <img class="share" src="code/img/share_icon.jpg" data-toggle="modal" data-target="#myModal1"> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="accordion" href="#collapseTwo"><img class="human" src="code/img/humanitarian-learning.jpg" alt="mac"></a> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><img class="arrow" src="code/img/arrow.jpg"></a> </h4> <a data-toggle="collapse" data-parent="accordion" href="#collapseTwo"> <div class="human_rights">Humanitarian Learning</div> </a> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <div class="col-sm-12"> <p class="description-para">Podcasts to listen and learn about humanitarian issues, find out about opportunities, develop new skills and brush up on old ones. </p> </div> <img class="pod-pic col-sm-8" src="code/img/laws_of_war.jpg" data-toggle="modal" data-target="#myModal"> <div class="col-sm-10"> <p class="para-head">Laws of War</p> <div class="sub-header">By: Australian RedCross</div> <div class="col-sm-10"> <p class="para"> In this podcast, eminent academics and lawyers unpack the laws of war, drawing on examples from Syria to South Sudan, Ukraine to the United States. </p> <a href="https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?mt=2"> <img class="itunes itune_bottom" src="code/img/music_icon.jpg"> </a> <img class="rss rss_bottom" src="code/img/rss_icon.jpg"> <img class="share" src="code/img/share_icon.jpg" data-toggle="modal" data-target="#myModal2"> </div> </div> </div> </div> </div> </div> </div> 

Answer 2

data-target="#myModal"> should be deference. When you run this code boostrapp model only detects first one ;

you can you like that:

data-target="#myModal">


data-target="#myModal2">