【问题标题】:Bootstrap Modal Only Opens SometimesBootstrap 模态有时仅打开
【发布时间】:2017-10-13 17:21:03
【问题描述】:

所以我的引导模式有问题。我将它放在手风琴中,它在第一个手风琴面板中完美运行,但在第二个手风琴面板中它不适用于任何元素。现在,这里有点棘手,它只有在两个面板都打开时才有效。因此,如果我将第一个手风琴面板打开,则模式将在第二个手风琴面板中工作。但是,如果第一个折叠起来,它就不会出现。

这是第一个面板中的代码示例:

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

【问题讨论】:

    标签: javascript jquery html bootstrap-modal


    【解决方案1】:

    data-target="#myModal"&gt; 应该尊重。当您运行此代码时, boostapp 模型仅检测到第一个;

    你能喜欢吗:

    data-target="#myModal">
    
    
    data-target="#myModal2">
    

    【讨论】:

    • 当我这样做时,Modal 根本不会出现:-/
    【解决方案2】:

    首先,如果您复制粘贴了代码,您需要做几件事。

    • 将 modal 放在顶层,即直接与 body 一起。
    • data- 属性(即data- toggledata- target 等)中删除不必要的空间。检查所有内容。
    • 如果两个弹出窗口具有相同的数据,则使用与 jQuery 相同的模态并监听 show.bs.modal 事件,然后在数据目标中操作数据,否则更改模态的 id。

    如果下面和之前有任何查询注释,请将下面的代码复制到一个简单的 html 文件中并检查输出或运行下面的 sn-p。

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

    【讨论】:

      猜你喜欢
      • 2019-03-17
      • 1970-01-01
      • 2021-11-21
      • 1970-01-01
      • 2015-10-28
      • 1970-01-01
      • 2023-02-24
      • 1970-01-01
      • 2023-03-30
      相关资源
      最近更新 更多