我试图在用户访问网站时显示横幅。我正在使用模态概念来显示横幅。但是，当我部署它时，modl 出现在页面顶部和下面页面的其余部分。
这是我的代码:--
<!DOCTYPE html>
<!--[if IE 7 ]>
<html lang="en-gb" class="isie ie7 oldie no-js">
<![endif]-->
<!--[if IE 8 ]>
<html lang="en-gb" class="isie ie8 oldie no-js">
<![endif]-->
<!--[if IE 9 ]>
<html lang="en-gb" class="isie ie9 no-js">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en-gb" class="no-js">
<!--<![endif]-->
<!--https://www.youtube.com/channel/UCegDTau7kzQnRMvzM9z1TWQ-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>International School of Astrology | Learn Astrology From Expert</title>
<meta name="description" content="Learn Financial Astrology, Learn Remedial Astrology, Astrology Institute, Astrology Classes, Learn Astrology, Certificate course in Astrology, Diploma course in Astrology, Advanced course in Astrology, Learn Horary Astrology, Learn Medical Astrology, in Delhi">
<meta name="Keywords" content="Learn Financial Astrology, Learn Remedial Astrology,Astrology Institute, Astrology Classes, Learn Astrology, Certificate course in Astrology, Diploma course in Astrology, Advanced course in Astrology, Learn Horary Astrology, Learn Medical Astrology, in Delhi">
<META NAME ="Googlebot" CONTENT="Index,Follow">
<META content="ArrayStack Technologies" name="AUTHOR">
<META name="copyright" content="Copyright © 2015 Astrology Delhi, All Rights Reserved">
<meta name='robots' content='index, follow'>
<meta name='rating' content='general'>
<meta http-equiv='content-language' content='en'>
<meta name="document-rating" content="Safe for Kids">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- **CSS - stylesheets** -->
<link id="default-css" rel="stylesheet" href="style.css" type="text/css" media="all" />
<link id="shortcodes-css" rel="stylesheet" href="shortcodes.css" type="text/css" media="all"/>
<link id="skin-css" rel="stylesheet" href="skins/skyblue/style.css" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="js/rs-plugin/css/settings.css">
<!-- **Additional - stylesheets** -->
<link rel="stylesheet" href="responsive.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/meanmenu.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/animations.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<!-- **Font Awesome** -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<!-- **Google - Fonts** -->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-33428938-2', 'auto');
ga('send', 'pageview');
</script>
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TLQVS4F');
</script>
<!-- End Google Tag Manager -->
<!--Image display on page load
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
<!--Image dispaly ends-->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TLQVS4F"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="loader-wrapper">
<div id="loader-image"></div>
</div>
<!-- **Wrapper** 1171 294 -->
<div class="wrapper">
<div class="inner-wrapper">
<?php include("inc/header.php") ?>
<!-- **Main - Starts** -->
<div id="main">
<!--Image laoding-->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<img src="1.jpg"></img>
</div>
<div class="modal-body" style="display:none;">
</div>
</div>
</div>
</div>
<!--Image loading finishes-->
<section id="revolution-banner">
<div class="container">
<div class="slider-container">
<div class="slider" id="revolutionSlider">
<ul>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/banner_may/1.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="isa">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/29.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="astrology courses">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/banner_may/3.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="astrology">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/banner_may/4.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="numerology">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/FinalBanner/Banner3.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="certificate astro">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/banner_may/6.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="tarot cards course">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/banner_may/7.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="vastu shastra courses">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/banner_may/8.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="palmistry courses">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/banner_may/9.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="astrology">
</li>
<li data-transition="fade" data-slotamount="5" data-masterspeed="1000" >
<img src="img/banner/banner_may/10.png" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" alt="tarot cards">
</li>
</ul>
</div>
<div class="tp-bannertimer tp-bottom"></div>
</div>
</div>
</section>
<?php include("inc/learnNEarn.php") ?>
<div class="dt-sc-margin65"></div>
<?php include("inc/home-info.php") ?>
<div class="dt-sc-hr-invisible"></div>
<?php include("inc/home-links.php") ?>
<?php include("inc/home-testimonials.php") ?>
<?php include("inc/home-appointment.php") ?>
<?php include("inc/home-team.php") ?>
</div>
<!-- **Main - Ends** -->
<?php include("inc/footer.php") ?>
</div>
<!-- **inner-wrapper - End** -->
</div>
<!-- **Wrapper - End** -->
<!-- **jQuery** -->
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate.min.js"></script>
<script src="js/preloader.js" type="text/javascript"></script>
<script src="js/pace.min.js" type="text/javascript"></script>
<script src="js/jquery.tabs.min.js"></script>
<script src="js/jquery.tipTip.minified.js"></script>
<script src="js/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<!-- <script src="js/jquery.inview.js" type="text/javascript"></script>-->
<script src="js/jquery.viewport.js" type="text/javascript"></script>
<script src="js/jquery.bxslider.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script src="js/greensock.js"></script>
<script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script>
<script src="js/jquery.isotope.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/responsive-nav.js" type="text/javascript"></script>
<script src="js/jquery.meanmenu.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.tipTip.minified.js"></script>
<!-- **Sticky Nav** -->
<script src="js/jquery.sticky.js" type="text/javascript"></script><script src="js/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script src="js/rs-plugin/js/jquery.themepunch.revolution.js"></script>
<!-- **To Top** -->
<script src="js/jquery.ui.totop.min.js" type="text/javascript"></script>
<script src="http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/custom.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
// Inline popups
$('.formisa').magnificPopup({
// delegate: 'a',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
//$.magnificPopup.open({
// items: {
// src: '<div class="cool-popup"><img src="images/isa-popup.jpg" /></div>', // can be a HTML string, jQuery object, or CSS selector
// type: 'inline'
// }
//});
});
// Revolution Slider Initialize
$("#revolutionSlider").each(function() {
var slider = $(this);
var defaults = {
delay: 6000,
startheight: 300,
startwidth: 1200,
hideTimerBar:"off",
autoHeight:"off",
hideThumbs: 10,
thumbWidth: 100,
thumbHeight: 50,
thumbAmount: 5,
navigationType: "both",
navigationArrows: "verticalcentered",
navigationStyle: "round",
touchenabled: "on",
onHoverStop: "on",
navOffsetHorizontal: 0,
navOffsetVertical: 20,
stopAtSlide:-1,
stopAfterLoops:-1,
shadow:1,
fullWidth: "off",
videoJsPath: "vendor/rs-plugin/videojs/"
}
// var config = $.extend({}, defaults, options, slider.data("plugin-options"));
// Initialize Slider
var sliderApi = slider.revolution(defaults).addClass("slider-init");
// Set Play Button to Visible
sliderApi.bind("revolution.slide.onloaded ",function (e,data) {
$(".home-player").addClass("visible");
});
});
</script>
</body>
</html>
在运行控制台时，我收到以下错误
Uncaught TypeError: $(...).modal is not a function
at HTMLDocument.<anonymous> ((index):74)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
不知道我哪里出错了。当我尝试不使用 cconflict 但也没有解决它
最佳答案
更改Js文件顺序 Bootstrap 后首先加载Jquery文件
<!--Image display on page load
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
关于javascript - 模态不工作说 $(...).modal 不是一个函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47195864/