时间戳

首页 > 解决方案 > 引导多个模态问题必须一个接一个地打开关闭

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

问题描述

嗨，我有多个用 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>

谢谢任何帮助表示赞赏

标签： phpjquerybootstrap-4bootstrap-modal

解决方案

正如@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>

推荐阅读