1
Я создаю сайт на основе «fullpage.js», и у меня есть некоторые слайды. Для каждого слайда имеется информационная кнопка, созданная с элементом «a» с глификоном от бутстрапа. Когда кнопка нажата информация Я хочу коробку модальный с идентификатором modal1 появляться переключая «не .closed» от дисплея: нет на дисплей: блок.modal box не появляется при нажатии на <a> элемент
Проблема в том, что модальность не появляется, я пытался добавить console.log к функции, но при нажатии кнопки ничего не происходит. Я использую jQuery в моем случае, но если у вас есть лучший метод, это было бы более чем приятно.
Я удалил части веб-сайта, которые, как я думал, не имеют отношения к вопросу.
Вот ссылка на фактический сайт: click here
Это мой код:
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="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;
}
Спасибо!
Я добавил дисплей: block to .modal, но я вижу модальный центр, как только загружается страница, и кнопка закрытия работает, но когда я нажимаю кнопку модального (info) не показывать снова. Есть что-то, чего я не хватает? –
это работает для меня. ваш модальный появляется на первом слайде вместо слайда, где находится модальная информационная кнопка, поэтому вы ее не видите. вам нужно будет зафиксировать позиционирование. – dommmm
Он работает!Я думаю, проблема заключалась в том, что # modal-overlay не исчез с модальным полем, поэтому я не мог нажать кнопку info, чтобы он появился. Я также изменил положение: зафиксировано с положением: абсолютным до .модальным, поэтому оно остается внутри слайда. –