Question

我有一个带有几张幻灯片的自举轮播。每个幻灯片都包含几个图像按钮以启动模态。但是，我发现只有活动的轮播项目才能启动模式。

单击第一张幻灯片中的图像时，该功能正常运行。

我发现，当我单击另一张幻灯片中的图像按钮时，源代码告诉我模式已打开。但是，只有灰色屏幕显示。

<body class="modal-open" style="padding-right: 17px;">

<div>class="modal-backdrop fade show" </div>

//轮播

<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
  <div class="row">
<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="2"><img src="images\fabio.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>


<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="3"><img src="images\EDDY.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>
<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="4"><img src="images\West.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>

<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="5"><img src="images\ALEX.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>

</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="6"><img src="images\Gary.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>

<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="7"><img src="images\i8.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
/div>


<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="8"><img src="images\Owen.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>

<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="9"><img src="images\Keble.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>
</div>
 </div>


</div>

<!-- Left and right controls -->
<a  id="move1" class="carousel-control-prev" href="#demo" data- 
slide="prev">
<span class="carousel-control-prev-icon bg-dark"></span>
</a>
<a  id="move2" class="carousel-control-next" href="#demo" data- 
slide="next">
<span class="carousel-control-next-icon bg-dark"></span>
</a>

</div>

// jQuery

$(document).ready(function() {
$('.modal').on('shown.bs.modal', function (e) {
$('.carousel').carousel('pause');
})


$('a.playerbutton').click(function(event) {
var status = $(this).attr('id');
var url = "modal.php?id=" + status;
$('.modal-container').load(url,function(result){
    $('#modal' + status).modal({show:true});
    });
    }); 
    });

\ modal.php

<!--  player Modal -->
<div class="modal fade" id="modal<?php echo $id; ?>" tabindex="-1" 
role="dialog" aria-labelledby="modal<?php echo $id; ?>" aria- 
hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Player Info</h5>
  </div>
 <div class="progress" style="height: 5px;">
 <div class="progress-bar bg-secondary" role="progressbar" style="width: 
 80%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
<div class="modal-body">
<div class="container-fluid border border-dark  news ">
<div class="card-header bg-dark text-white text-center ">Player 
Info</div>
<div class="row">

  <div class="col-md-5 "><img src= "<?php echo $path; ?>" 
  class="playerimg"></div>
  <div class="col-md-6 mt-4">
  <p class="comp1"> ID: <?php echo $name; ?></p>
  <p class="comp1"> Jersey No:<?php echo $number; ?></p>
  <p class="comp1"> Position :<?php echo $pos; ?></p>
  <p class="comp1"> Nationalities:<?php echo $nation; ?></p>
  </div>
  </div>
 </div>
 <br>
<div class="container-fluid border border-dark  news ">
<div class="card-header bg-dark text-white text-center ">Stats</div>
<div class="row">

  <div class="col-md-12 col-sm-12">
    <table class="pstat">
      <tr class="bg-dark text-white text-center">
<th>Competition</th>
<th>Apps</th> 
<th>Goal</th>
<th>Assist</th>
<th>Yellow Card</th>
<th>Red Card</th>
</tr>
<tr>
 <td id="compinpstat">Taiwan Fifa Premier League Season 12</td>
<td>0</td> 
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
 </tr>
    </table>
  </div>
</div>
</div>
</div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data- 
  dismiss="modal">Close</button>
  </div>
</div>
</div>
</div>
<!--  player Modal -->

预期输出（活动幻灯片输出）： First Slide output

现在：

Fail to show modal

我不知道发生了什么事。

对不起，我英语不好。感谢您解决我的问题。

这就是我可以单击并正确启动模式的部分。我试图将非活动轮播行中的内容更改为活动轮播行，并且它可以正常工作。所以，我想这可能与主动轮播课程有关。

<div class="carousel-item active">
<div class="row">
<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="2"><img src="images\fabio.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>


<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="3"><img src="images\EDDY.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>
<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="4"><img src="images\West.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>

<div class="col-md-3 col-4">
<a class="btn btn-primary pull-right playerbutton" data-toggle="modal" 
href="#" id="5"><img src="images\ALEX.png" class="squadplayerimg"></a>
<div class="modal-container"></div>
</div>

</div>

引导模式未显示在引导轮中，但活动轮播项除外

0 个答案: