【问题标题】:Bootstrap Modal disabled引导模式已禁用
【发布时间】:2026-02-01 16:35:01
【问题描述】:

他们是否有任何具有 Bootstrap 专业知识的人可以解决我的问题?我有从 MYsql 数据库表中加载动态数据的模式。问题是,它显示模式禁用。意味着我无法关闭它。我不知道如何解决它。完全卡住了。 完整代码如下:

代码

<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>

截图

【问题讨论】:

    标签: javascript jquery mysql twitter-bootstrap


    【解决方案1】:

    是的,这是 css 问题,你必须增加 modal-content 类的 z-index

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

    【讨论】:

    • 这不起作用,因为默认情况下 .modal-backdrop (黑色透明背景)具有更大的 z-index,我认为是 1040!
    • 这也不起作用,因为.modal-content 是其他已经具有 z-index 值的元素的子元素。请检查我的答案。
    • @krantikumar 问题出在modal-backdrop fade in 类。当我检查元素并删除此类时,它会触发取消按钮。但是怎么纠正呢?我应该删除它吗?
    • @NightKn8 我也遇到了同样的问题。它对我有用,所以试试吧。
    • @NightKn8 只需删除 modal-backdrop 类。它会起作用的。因为 modal-backdrop 类具有不透明度:0.5 和位置:固定。
    【解决方案2】:

    确保.modal-backdropz-index 必须小于.modal-contentz-index

    例如:

    .modal-backdrop {z-index: 1050;}
    .modal-content {z-index: 1060;}
    

    【讨论】:

    • 所以我只需要将.couponModal 更改为#couponModal
    • 我已经检查并指向类而不是 ID 对这个问题没有影响。
    • @Gaurav 我将 &lt;p class="btn-code" data-toggle="modal" data-target=".couponModal&lt;?php echo $row1['c_id']?&gt;" data-id="&lt;?php echo $row1['c_id'] ?&gt;"&gt; 更改为 &lt;p class="btn-code" data-toggle="modal" data-target="#couponModal&lt;?php echo $row1['c_id']?&gt;" data-id="&lt;?php echo $row1['c_id'] ?&gt;"&gt; AND &lt;div class="coupon_modal modal fade couponModal&lt;?php echo $row1['c_id'] ?&gt;" tabindex="-1" role="dialog" &gt;TO &lt;div class="coupon_modal modal fade couponModal" id="couponModal&lt;?php echo $row1['c_id'] ?&gt;" tabindex="-1" role="dialog" &gt; 仍然没有变化:/
    • @GauravPaliwal 我在哪里可以罚款这门课?? .modal-bootstrap bootstrap.min.css 中没有它
    • 我的错误;这是.modal-content@tabia
    【解决方案3】:

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

    编辑: 还要确保您拥有最新版本,这也可能是某些工作不正常的原因:

    <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>
    

    【讨论】:

    • 我做了你的工作,是的,问题是 .modal-backdrop,但是当我检查元素时它仍然在整个屏幕上显示背景类
    • 你有自己的css文件吗?如果是,请将您的stylesheet.css 放在bootstrap.min.css 下并在您的css 文件中添加:.modal{z-index:9999;}。否则,另外使用.modal{z-index:9999 !important;} 进行故障排除将.modal-backdrop z-index 设置为0;
    • 不,我没有自己的 CSS。我正在使用它的库bootstrap.min.css,并且在其中添加了 z-index。但什么也没发生:
    • 我认为我的 bootstrap.min.css 文件没有生成更改。它在顶部说Generated sources should not be edited. The changes will be lost when sources are regenerated
    • 这对我也不起作用!发生了什么!!有没有办法用.modal-dropback 类删除这个节点?因为当我在 Inspect 元素中隐藏这个节点时它可以工作\