0
以下代码在单击时显示错误。当点击项目图像时，不会弹出正在加载的画面，只有背景变淡。有什么方法可以克服这个错误吗？Modal弹出不加载，只有背景变淡
<!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">×</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"> PREV</span></button>',
nextArrow:'<button class="NextArrow"><span class="slider-arrow">NEXT </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>
我测试你的代码在铬。工作。 –