Question

具有Bootstrap专业知识的任何人都可以解决我的问题吗？我有来自MYsql db表的模态加载动态数据。问题是，它显示禁用模式。意味着我无法关闭它。我不知道如何解决它。完全被困了。这是完整的代码：

代码

<body>
<div id="popular" class="tab-pane counties-pane active animated fadeIn">
    <?php
    $q=mysqli_query($con,"  SELECT c.* , sc.* , sm.* ,ca.* from store_category sc INNER JOIN store_manufacture sm ON sm.sm_id=sc.store_id INNER JOIN categories ca ON ca.cat_id=sc.cat_id INNER JOIN coupons c on c.c_sc_id=sc.sc_id ");
    while($row1=mysqli_fetch_array($q,MYSQLI_ASSOC)) {
        $h = strpos($row1['sm_link'], 'http');
        ?>


        <div class="coupon-wrapper row">
            <div class="coupon-data col-sm-2 text-center">
                <div class="savings text-center">
                    <div>
                        <div class="large"><?php echo $row1['c_name'] ?></div>
                        <div class="small">off</div>
                        <div class="type"><?php echo $row1['sm_brand_name'] ?></div>
                    </div>
                </div>
                <!-- end:Savings -->
            </div>
            <!-- end:Coupon data -->
            <div class="coupon-contain col-sm-7">

                <h4 class="coupon-title"><a href="<?php echo ($h !== FALSE)?$row1['sm_link']:"http://".$row1['sm_link'] ?>" target="_blank"><?php echo $row1['c_description']?></a></h4>

                <p data-toggle="collapse" data-target="#<?php echo $row1['c_id']?>">Shop these Shopname deals of the day  to save as much...</p>
                <p id="<?php echo $row1['c_id'] ?>" class="collapse">Don't miss out on all the coupon savings.Get you coupon now and save big</p>

                <!-- end:Coupon details -->
            </div>
            <!-- end:Coupon cont -->
            <div class="button-contain col-sm-3 text-center">

              <p class="btn-code" data-toggle="modal"  data-target=".couponModal<?php echo $row1['c_id']?>" data-id="<?php echo $row1['c_id'] ?>">
                    <span class="partial-code"><?php echo $row1['c_code'] ?></span>
                    <span class="btn-hover">Get Code</span></p>

            </div>

            <!-- end: coupon wrap -->
            <!-- Modal-->
            <div class="coupon_modal modal fade couponModal<?php echo $row1['c_id'] ?>" tabindex="-1" role="dialog"  >
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="ti-close"></i></span> </button>
                        <div class="coupon_modal_content">

                            <div class="row">
                                <div class="col-sm-10 col-sm-offset-1 text-center">
                                    <h2><?php echo $row1['c_name'] ?></h2>
                                    <p><?php echo $row1['c_description'] ?></p>
                                </div>

                                <div class="row">
                                    <div class="col-sm-12">
                                        <h5 class="text-center text-uppercase m-t-20 text-muted">Click below to get your coupon code</h5>
                                    </div>

                                    <div class="col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3"> <a href="<?php echo ($h !== FALSE)?$row1['sm_link']:"http://".$row1['sm_link'] ?>" target="_blank" class="coupon_code alert alert-info"><span class="coupon_icon"><i class="ti-cut hidden-xs"></i></span>  <?php echo $row1['c_code'] ?>
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- end: Coupon modal content -->
                    </div>
                </div>

            </div>
            <!--modal end-->

           </div>


        <?php
    }
    ?>
    <!-- jQuery  -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/animsition.min.js"></script>
    <script src="owl.carousel/owl.carousel.min.js"></script>
    <!-- Kupon js -->
    <script src="assets/js/kupon.js"></script>

</div>



</body>

截图

Answer 1

确保z-index的{{1}}必须小于.modal-backdrop的{{1}}。

例如：

z-index

Answer 2

是的，这是css问题，只需要增加模态内容类的 z-index 。

.modal-content{
  z-index:2000;
}

Answer 3

在你的css中尝试添加：.modal{z-index:2000;} 所以它可以高于透明黑色.modal-backdrop。如果您在文档头中使用自己的css文件，请将其放在bootstrap css文件下，否则在!important中使用z-index，但不建议这样做。

修改还要确保你有最新的版本，这也可能是一些不正常工作的原因：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap Modal已停用

3 个答案: