表示$(.).modal不是函数的模态不工作
表示$(.).modal不是函数的模态不工作
提问于 2017-11-09 07:06:26
每当用户访问网站时，我都试图显示一个横幅。我使用模态概念来显示横幅。然而，当我部署它时，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)不知道我哪里出了问题。当我尝试使用没有冲突，但这也没有解决它
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-09 07:17:51
更改次序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>Stack Overflow用户
发布于 2017-11-09 09:20:25
在加载jquery库之前，您似乎已经调用了bootstrap.min.js，并对引导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>这将首先加载引导css，然后加载jquery库，然后加载引导js，其中包含定义模态函数的代码。
这应该能解决这个问题。
如果仍然存在问题，请删除页脚中定义的额外jquery库。
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47195864
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号