I'm currently working on a website project that utilizes "fullpage.js" and includes multiple slides. Each slide features an info button created with an "a" element containing a glyphicon from bootstrap. When this info button is clicked, I intend for a modal box identified by the id modal1 to toggle its visibility from display:none to display:block.
The challenge I am facing is that the modal isn't appearing as expected. Despite adding console.log statements to debug the function when the button is clicked, no action occurs. While I'm using jQuery in my implementation, I'm open to suggestions if you have an alternative solution.
To streamline the question, I've omitted parts of the website setup which I deemed irrelevant. For reference, you can visit the live site at: this link
This is a snippet of my code :
HTML & Javascript
<head>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Bootstrap-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity=...
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Prompt|Text+Me+One|Quicksand|Monoton" rel="stylesheet">
<!--Fullpage.js-->
<script src="Fullpage-js/fullPage.js-master/vendors/jquery.easings.min.js"></script>
<link rel="stylesheet" type="text/css" href="Fullpage-js/jquery.fullPage.css" />
<script type="text/javascript" src="Fullpage-js/jquery.fullPage.js"></script>
<!--CSS file-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--particles.js-->
<script src="particles.js-master/particles.js"></script>
<script type="text/javascript">
particlesJS.load('particles-js', 'particles.js-master/particlesjs-config.json', function () {
console.log('callback - particles.js config loaded');
});
</script>
<!--Fullpage setup-->
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
sectionsColor: ['rgba(255, 255, 255, 0)', 'rgba(105, 163, 193, 0.63)', 'rgba(255, 255, 255, 0)', '#f1937a', ],
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', ],
// navigation: true,
slidesNavigation: true,
continuousVertical: true,
verticalCentered: true,
...
CSS
/*colors used:
Blue:#69a3c1
Orange:#f1937a
*/
.section {
margin-top: 0;
}
.particles {
height: 100vh !important;
width: 100vw !important;
position: fixed;
z-index: 0;
}
body {
margin: 0;
font-family: "adam" !important;
}
.first {
z-index: 1;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {} #fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {} .fp-prev {
margin-left: 3vw;
}
.slideContainer h1 {
font-family: 'Text Me One', sans-serif;
font-weight: 200;
color: black;
font-size: 5vw;
}
.slideContainer {
margin: 0 auto;
width: 50vw;
text-align: center;
}
...
Thanks!