I am building a website based on "fullpage.js" and I have some slides. For every slide there is an info button made with an "a" element with a glyphicon from bootstrap. When the info button is clicked I want a modal box with the id of modal1 to appear by toggling ".closed" from display:none to display:block.
The problem I have is that the modal does not appear, I tried to add console.log to the function but when the button is clicked nothing happens. I am using jQuery in my case but if you have a better method it would be more than welcome.
I removed parts of the website that I thought were irrelevant to the question.
Here is the link to the actual website: click here
时，不显示模态框这是我的代码：
HTML＆amp;的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="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--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,
touchSensitivity: 5,
css3:true,
easingcss3: "ease-in-out",
recordHistory: false,
// scrollBar:true
});
});
</script>
</head>
<body>
<div class="section first">
</div>
<!--SECTION 2-->
<div class="section">
</div>
<!--SECTION 3-->
<div class="section">
<div class="slide">
<div class="slideContainer">
<h1>text</h1>
<!--Buttons-->
<!--This div contains the two buttons-->
<div class="buttonContainer">
<!--This one should trigger the modal box-->
<a class="info" id="button1">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
<!--Another button-->
<a href="" class="info">
<span class="glyphicon glyphicon-globe"></span>
</a>
</div>
<!--This is the modal div-->
<div class="modal" id="modal1">
<div>
<p>bla bla bla</p>
<a href="#close" title="Close" id="close">X</a>
</div>
</div>
<!--modal overlay-->
<div class="modal-overlay" id="modal-overlay">
</div>
</div>
</div>
<!--Other slides-->
<div class="slide">
<div class="slide">
</div>
</div>
<!--SECTION 4-->
<div class="section">
</div>
</div>
<!--GENERAL JAVASCRIPT-->
<script type="text/javascript">
//The code that should trigger the modal
var modal = document.querySelector("#modal1");
var modalOverlay = document.querySelector("#modal-overlay");
var closeButton = document.querySelector("#close");
var openButton = document.querySelector("#button1");
closeButton.addEventListener("click", function() {
console.log("it works");
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
openButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalOverlay.classList.toggle("closed");
});
</script>
</body>
</html>
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;
}
.slideContainer img {
width: 20vw;
}
.fp-controlArrow.fp-prev {
border: none;
width: 70px;
height: 105px;
margin-left: -15px;
background-image: url(../images/left-arrow.png);
background-repeat: no-repeat;
background-position: center;
background-size: 50px 50px;
background-color: rgba(241, 147, 122, 0.4);
-webkit-transition: background-color 0.2s;
}
.fp-controlArrow.fp-prev:hover {
background-color: rgba(241, 147, 122, 0.7);
}
.fp-controlArrow.fp-next {
border: none;
width: 70px;
height: 105px;
margin-right: -15px;
background-image: url(../images/right-arrow.png);
background-repeat: no-repeat;
background-position: center;
background-size: 50px 50px;
background-color: rgba(241, 147, 122, 0.4);
-webkit-transition: background-color 0.2s;
}
.fp-controlArrow.fp-next:hover {
background-color: rgba(241, 147, 122, 0.7);
}
.info {
float: left;
margin-left: 20px;
margin-right: 20px;
width: 50px;
height: 50px;
}
.info div {
width: 60px;
height: 60px;
border-radius: 100px;
background-color: aqua;
margin: 0 auto;
}
.slideContainer h1 {
font-family: 'Monoton', cursive;
font-size: 9vw;
color: #69a3c1;
white-space: pre;
margin-bottom: 8vh;
}
.slideContainer {
width: 100vw;
}
.buttonContainer {
display: inline-block;
margin: 0 auto;
}
.buttonContainer span {
font-size: 4vw;
border-radius: 100px;
border: 0;
color: #69a3c1;
-webkit-transition: background-color 0.2s;
-webkit-transition: color 0.2s;
}
.buttonContainer span:hover {
color: #f1937a;
cursor: pointer;
a
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
max-width: 100%;
height: 400px;
max-height: 100%;
z-index: 1010;
}
.modal-overlay {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* for example... */
display: block;
}
.modal.closed {
display: none;
}
谢谢！
答案 0 :(得分：2)
我查看了您的网站，模态按钮工作并触发点击事件。但是我发现了两个问题：
切换课程.closed
切换模态的引导类是.modal-open。你正在以相反的方式进行，这很好，但是你需要默认将.modal的css更改为display: block。它现在设置为display: none;（来自引导程序），因此您的切换类不会改变任何内容。
模态定位
你的模态定位很远。在更改了第（1）点中提到的css bug之后，你的模态就出现了，就在屏幕外，所以你永远不会看到它。固定位置然后按预期显示。