我有一个模态,其中包含从db生成的动态数据。问题是,当我打开一个模态时,它会禁用整个屏幕,直到我刷新页面。即使我无法关闭我的模态。为什么会这样?我也在代码的末尾添加了库。
代码
<?php
include "db.php";
?>
<head>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/animsition.min.css" rel="stylesheet" type="text/css">
<link href="owl.carousel/assets/owl.carousel.css" rel="stylesheet" type="text/css">
<!-- Theme styles -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script type="text/javascript" src="engine1/jquery.js"></script>
</head>
<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');
?>
<!-- Large modal -->
<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 -->
<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>
</div>
<?php
}
?>
</div>
<!--modal-->
<!--Modal-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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>-->
</body>
</html>
</body>