所以我的bootstrap模式有问题。我在手风琴中有它，它在第一个手风琴面板中工作得很完美，但在第二个手风琴面板中它并不适用于任何元素。现在，这里有点棘手，只有在两个面板都打开时才能正常工作。因此，如果我打开第一个手风琴面板，模态将在第二个手风琴面板中工作。但是，如果第一个崩溃，它就不会显示出来。
以下是第一个面板中代码的示例：
<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 -->
答案 0 :(得分：1)
首先，如果复制粘贴代码，则需要做几件事。
data-属性中移除不必要的空格，即data- toggle，data- target等。检查所有内容。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">×</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 -->
<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">×</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>
答案 1 :(得分：-1)
data-target="#myModal">应该是顺从的。运行此代码时，boostrapp模型仅检测第一个;
data-target="#myModal">
data-target="#myModal2">