我试图在用户访问网站时显示横幅广告。我正在使用模态概念来显示横幅。但是当我部署它时，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，但也没有解决它
答案 0 :(得分：2)
更改订单Js文件首先在引导程序
之后加载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>
答案 1 :(得分：1)
在加载jquery库之前，似乎已经调用了bootstrap.min.js，并且注释了bootstrap CSS文件。您可以使用以下代码：
<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>
这将首先加载Bootstrap css，然后加载jquery库和后来的bootstrap js，其中包含用于定义模态函数的代码。
这应该可以解决问题。
如果仍有问题，请删除页脚中定义的其他jquery库。
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>