javascript - Bootstrap 模态仅有时打开

标签 javascript jquery html bootstrap-modal

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

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

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

最佳答案

首先，如果您复制粘贴了代码，则需要执行几件事。

  • 将模态框放在顶层，即直接放在正文中。
  • 从 data- 中删除不必要的空格属性，即来自 data- toggle , data- target等等。检查所有内容。
  • 如果两个弹出窗口具有相同的数据，则使用相同的 jQuery 模式并收听 show.bs.modal事件，然后操作数据目标中的数据，更改模态的 id。

如果下面和之前有任何查询注释，请将下面的代码复制到一个简单的 html 文件中，然后检查输出或运行下面的代码片段。

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

关于javascript - Bootstrap 模态仅有时打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43970756/

上一篇：javascript - 不要在循环内创建函数 jshint

下一篇：javascript - 在 Google 脚本网络应用中添加 URL 参数

相关文章：

javascript - 将输入标签读入 JavaScript 字符串

javascript - jquery 按下按钮点击元素

javascript - 如果我有日期对象，如何在 javascript 中将日期显示为 2/25/2007 格式

javascript - responseXML 显示为 null，即使 xhr 对象显示为已设置

javascript - 无法通过javascript加载html文件

Javascript百分比计算器加法器功能不起作用

javascript - 如何确定在工作时间/工作日显示的图像？

javascript - PhantomJS 无法点击现有元素

python - 如何在 django 模板中迭代嵌套字典和列表

html - Gmail 不在 html 邮件中执行 CSS (svnspam)

©2024 IT工具网  联系我们