单击 <a> 元素时不出现模式框

modal box does not appear when clicking on <a> element

我正在基于 "fullpage.js" 构建一个网站，并且我有一些幻灯片。每张幻灯片都有一个信息按钮，由 "a" 元素和来自 bootstrap 的字形组成。单击信息按钮时，我希望通过切换“.closed[=”显示 ID 为 modal1 的 modal box 42=]" 从 display:none 到 display:block.

我遇到的问题是模式没有出现，我尝试将 console.log 添加到函数中，但是单击按钮时没有任何反应。我在我的案例中使用 jQuery，但如果您有更好的方法，我们将非常欢迎。

我删除了网站上我认为与问题无关的部分内容。

这里是 link 到实际的网站：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;
}

谢谢！

我查看了您的网站，模态按钮有效并触发了点击事件。但是我发现了两个问题：

  1. 切换class .closed

    用于切换模式的 bootstrap class 是 .modal-open。您正在以相反的方式进行操作，这很好，但是您需要默认将 .modal 的 css 更改为 display: block。它现在设置为 display: none;（来自 bootstrap），因此您的切换 class 没有任何改变。

  2. 模态定位

    您的模态定位有偏差。更改第 (1) 点中提到的 css 错误后，您的模式出现，就在屏幕之外，因此您永远不会看到它。固定位置然后按您的预期显示它。