Jigna Jain
Reputation: 255
Modal not working saying $(...).modal is not a function
I am trying to display a banner whenever the user visits website. I am using modal concept to display the banner. However when I deploy it the modl appears on top of page and rest of page below.
Here is my code :--
<!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>
On running console I am getting following error
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)
Not sure where I am going wrong. As I tried using no cconflict but that also didnt resolve it
Upvotes: 0
Views: 1301
Answers (2)
Rijo
Reputation: 2718
It seems that you have called bootstrap.min.js before loading jquery library and the bootstrap CSS file is commented. You can use the code like the following:
<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>
This will load Bootstrap css first, then jquery library and later bootstrap js which contains code to define modal function.
This should solve the problem.
If there are still issues, please remove the additional jquery library defined in footer.
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
Upvotes: 1
Lalji Tadhani
Reputation: 14169
Change Order Js File First load Jquery file after bootstrap
<!--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>
Upvotes: 2
Related Questions
- TypeError: $(...).modal is not a function with bootstrap Modal
- Bootstrap modal: is not a function
- Bootstrap : TypeError: $(...).modal is not a function
- Uncaught TypeError: $(...).modal is not a function jquery
- Bootstrap 4 - .modal is not a function
- bootstrap modal $(...).modal is not a function
- Bootstrap modal error
- $(...).modal is not a function
- bootstrap3 modal js undefined function
- Bootstrap, jQuery in modal doesn't work