引导多个模态问题必须一个接一个地打开关闭

Posted 2023-03-21

【中文标题】引导多个模态问题必须一个接一个地打开关闭

【英文标题】：bootstrap multiple modals issue must open one after another closed

【发布时间】：2021-11-21 03:42:22

【问题描述】：

您好，我有多个使用 php 动态创建的 Bootsyrap 模态，如果满足要求，这些模态会自行打开，我想一个接一个地打开关闭，问题不确定所有三个模态都满足要求，有时我们有 2 个，一些第一次，所以我也不能使用模态关闭事件

 // 1st modal

<?php if(count($getNewBadges) >0  )  ?>
<script>
$(document).ready(function() 
 $("#EarnBadgeModal").modal('show');
     $.ajax(
      type: "POST",
      url: "<?php  echo SITE_URL; ?>/engagement/award/ajax/award_ajax.php",
      data:  action:'set_badge_popup' ,
      success: function(response)   
        $("#EarnBadgeModal").modal('hide');
      
    ); 
   
);
</script>
<?php  ?>

// 2nd modal

<?php if(count($getNewContest) >0)  ?>
 <script>
 $(document).ready(function() 
 $("#ContestUserModal").modal('show');
  $('#ContestUserModal').css('z-index', 1040);
     $.ajax(
      type: "POST",
      url: "<?php  echo SITE_URL; ?>/engagement/leaderboard/ajax/leaderboard_ajax.php",
      data:  action:'set_contest_read' ,
      success: function(response)   
      
    ); 
   
);
 </script>
 <?php  ?>

  // 3rd modal

if(count($getPoints) >0) 

 ?>
    <script>
      $(document).ready(function() 
       $("#pointsUserModal<?php echo $mv; ?>").modal('show');
       $('#pointsUserModal').css('z-index', 1049);
         
      );
    </script>
  <?php

我尝试了很多类似下面的方法，但没有任何效果

 <style type="text/css">
.modal-backdrop + .modal-backdrop 
z-index: 1051;


.modal-backdrop + .modal-backdrop + .modal-backdrop 
 z-index: 1051;

</style>

 // another 
 <style type="text/css">
 .modal-backdrop:nth-child(2n-1) 
  opacity : 0;
 
 </style>

谢谢 任何帮助表示赞赏

【问题讨论】：

“所以我也不能使用模态关闭事件” - 为什么不呢？是什么阻止您在尝试打开下一个模态元素之前检查它是否确实存在？

@CBroe，如果前一个不退出怎么办？

“以前的”是什么意思？你是想在某个时候“倒退”，还是什么？

@CBroe 我们可能有 ContestUserModal、EarnBadgeModal、pointsUserModal 全部 3 个需要打开，有时 EarnBadgeModal、pointsUserModal only ，有时 EarnBadgeModal 和 ContestUserModal 只有

这一切都取决于用户是否已将某些内容分配给相关模式，例如是否分配了徽章和分配了积分，我们将需要打开徽章模式和积分模式而不是比赛模式

【参考方案1】：

我确实按照@Cbroe 的建议这样做了，现在它工作正常，在引导关闭按钮 .closeModal 上添加了一个类

<script type="text/javascript">
$( document ).ready(function() 
  for (i = 0; i < 1; i++) 
    $(modalArr[0]).modal('show');
    modalArr.shift();
  
  );


$(".closeModal").on('click', function()
 
for (i = 0; i < 1; i++) 
$(modalArr[0]).modal('show');
 modalArr.shift();


);

console.log(modalArr);

</script>