Question

以下代码在单击时显示错误。单击项目图像时，不会加载弹出窗口，只有背景会消失。有什么方法可以克服这个错误吗？

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/slider.css" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="css/media.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/set1.css" />


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and     `enter code here`media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>


    <div class="item">
      <div class="grid">
        <figure class="effect-bubba"> <img src="admin_flameco/project/<?php echo $prow['Image']; ?>" class="img-responsive" alt="img16"/>
          <figcaption>
            <h4 class="carous-style-text"><?php echo $prow['Text']; ?><br>
              <?php echo $prow['Text2']; ?></h4>
            <p class="carous-zoom"><i class="fa fa-search-plus carous-zoom-icon" aria-hidden="true"></i> </p>
            <h4 class="carous-text-2"><?php echo $prow['Text3']; ?></h4>
            <a href="" data-toggle="modal" data-target="#myModal">View more</a> </figcaption>
        </figure>
      </div>
    </div>

这里是弹出按钮。和代码如下。错误在这部分。

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script>
    $(function(){
    $(".dropdown").hover(            
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
                $(this).toggleClass('open');
                $('b', this).toggleClass("caret caret-up");                
            },
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
                $(this).toggleClass('open');
                $('b', this).toggleClass("caret caret-up");                
            });
    }); 
</script> 
<script>
 $(document).ready(function() {   
           var sideslider = $('[data-toggle=collapse-side]');
           var sel = sideslider.attr('data-target');
           var sel2 = sideslider.attr('data-target-2');
           sideslider.click(function(event){
               $(sel).toggleClass('in');
               $(sel2).toggleClass('out');
           });
var size = $(".Modern-Slider .item").size();
$("#slider-total").html(size > 10 ? size : '0' + size);
$("#current-slide").html(01);
       });
 </script> 
<script src="js/slick.js"></script> 
<script>
 $(document).ready(function(){

 $(".Modern-Slider").slick({
   autoplay:true,
   autoplaySpeed:10000,
   speed:600,
   slidesToShow:1,
   slidesToScroll:1,
   pauseOnHover:false,
   dots:true,
   pauseOnDotsHover:true,
   cssEase:'linear',
  // fade:true,
   draggable:false,
   prevArrow:'<button class="PrevArrow"><span class="slider-arrow">&nbsp;PREV</span></button>',
   nextArrow:'<button class="NextArrow"><span class="slider-arrow">NEXT&nbsp;</span></button>', 
 });


 $('.Modern-Slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
var size = currentSlide + 1;
$("#current-slide").html(size > 10 ? size : '0' + size);
 })

})
 </script> 
<script src="js/owl.carousel.min.js"></script> 




<script>

    $(document).ready(function($) {
      $("#owl-example").owlCarousel({
          //Autoplay
    items : 5,
    itemsMobile : [479,2],
    itemsTablet: [768,3],
    autoPlay : false,
    stopOnHover : false,
      // Navigation
navigation : true,
 navigationText : ["<arrow>PREV</arrow>","<arrow2>NEXT</arrow2>"],
    rewindNav : true,
    scrollPerPage : false,
              pagination : false,
    paginationNumbers: false,
          //Basic Speeds
    slideSpeed : 200,
    paginationSpeed : 800,
    rewindSpeed : 1000,


          });
   });<!-- for slider -->


    $("body").data("page", "frontpage");

    </script>
</body>
</html>

Answer 1

朋友请检查你的另一个jquery插件。我认为你添加了jquery carousel发生你的问题。请删除那个jquery插件并正常检查它。我认为它工作正常。因为jquery或css文件继承你的bootstrap文件。

模态弹出不加载，只有背景褪色

1 个答案: