Javascript 引导模式有时只打开
所以我的引导模式有问题。我把它放在一个手风琴里，它在第一个手风琴面板上工作得非常完美，但在第二个面板上，它对任何元素都不起作用。现在，这里是它变得有点棘手的地方，它只有在两个面板都打开的情况下才能工作。因此，如果我让第一个手风琴面板打开，模态将在第二个手风琴面板内工作。但是，如果第一个已折叠，则不会显示 以下是第一个面板中的代码示例：Javascript 引导模式有时只打开,javascript,jquery,html,bootstrap-modal,Javascript,Jquery,Html,Bootstrap Modal,所以我的引导模式有问题。我把它放在一个手风琴里，它在第一个手风琴面板上工作得非常完美，但在第二个面板上，它对任何元素都不起作用。现在，这里是它变得有点棘手的地方，它只有在两个面板都打开的情况下才能工作。因此，如果我让第一个手风琴面板打开，模态将在第二个手风琴面板内工作。但是，如果第一个已折叠，则不会显示 以下是第一个面板中的代码示例： <div id="accordion" class="panel-group panel"> <div class="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">×
</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&text=UNICEF%20Podcast%20By: UNICEF&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">×</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 -->
有关儿童权利和保护的播客
处于危险中的人，从冲突地区的平民到难民和难民
寻求庇护者在流动
联合国儿童基金会播客
作者：联合国儿童基金会
联合国儿童基金会新推出的全球广播服务，重点关注
健康、教育、平等和保护儿童。由Blue主持
切维尼与来自世界各地的联合国儿童基金会记者进行了交流
分享这个播客
接近
下面是第二个示例的代码：
要收听和了解的播客
人道主义问题，发现机会，发展新技能和
重温旧事
战争法
作者：澳大利亚红十字会
在本播客中，知名学者和律师们将
战争法，从叙利亚到南苏丹，从乌克兰到美国
美国
分享这个播客
接近
数据目标=“#myModal”>data-target="#myModal">
data-target="#myModal2">
data target=“#myModal”>data-target="#myModal">
data-target="#myModal2">
首先，如果你已经复制粘贴了代码，你需要做几件事
- 将modal置于顶层，即直接与车身相连
- 从
属性中删除不必要的空格，即从数据-
，数据-切换
等中删除。检查所有空格数据-目标 - 如果两个弹出窗口具有相同的数据，则将相同的模式与jQuery一起使用，并侦听
事件，然后在数据目标中处理数据，否则更改模式的idshow.bs.modal
分享这个播客
接近
分享这个播客
接近
有关处于危险中的人的权利和保护的播客，从冲突地区的平民到流动中的难民和寻求庇护者
联合国儿童基金会播客
作者：联合国儿童基金会
联合国儿童基金会新推出的全球广播服务，重点关注儿童的健康、教育、平等和保护。由Blue Chevigny与来自全球的联合国儿童基金会记者共同主持。
通过播客收听和了解人道主义问题，发现机会，培养新技能并复习旧技能。
战争法
作者：澳大利亚红十字会
在这篇播客中，著名学者和律师以叙利亚、南苏丹、乌克兰和美国为例，解读战争法。
- 将modal置于顶层，即直接与车身相连
- 从
属性中删除不必要的空格，即从数据-
，数据-切换
等中删除。检查所有空格数据-目标 - 如果两个弹出窗口具有相同的数据，则将相同的模式与jQuery一起使用，并侦听
事件，然后在数据目标中处理数据，否则更改模式的idshow.bs.modal
分享这个播客