Fatal编程技术网
  • jquery/
  • Jquery 单击<；时不显示模式框；a>；要素

Jquery 单击<；时不显示模式框；a>；要素

jquery html css

Jquery 单击<；时不显示模式框；a>；要素,jquery,html,css,fullpage.js,Jquery,Html,Css,Fullpage.js,我正在建立一个基于“fullpage.js”的网站，我有一些幻灯片。对于每张幻灯片，都有一个信息按钮，由一个带有引导图标的“a”元素制成。单击“信息”按钮时，我希望通过从“显示：无”切换到“显示：块”，显示一个id为“modal1”的“模式框” <head> <!--jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">&

我正在建立一个基于“fullpage.js”的网站，我有一些幻灯片。对于每张幻灯片，都有一个信息按钮，由一个带有引导图标的“a”元素制成。单击“信息”按钮时，我希望通过从“显示：无”切换到“显示：块”，显示一个id为“modal1”的“模式框”

<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>
我遇到的问题是，模式没有出现，我试图向函数中添加console.log，但当单击按钮时，什么也没有发生。我使用的是jQuery，但如果您有更好的方法，那将非常受欢迎

<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>
我删除了网站上我认为与问题无关的部分内容

<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>
以下是实际网站的链接：

<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>
这是我的代码：

<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>
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>
谢谢

我查看了您的站点，模式按钮工作并触发单击事件。然而，我发现了两个问题：

<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>
  • 切换类
    .closed

    <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>
    切换模态的引导类是
    .modal open
    。相反，这很好，但是您需要将
    .modal
    的css默认更改为
    显示：block
    。现在设置为
    display:none（来自引导），因此您的切换类不会更改任何内容
    

    <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>
  • 模态定位

    <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>
    你的模态定位太差了。在改变了第（1）点中提到的css错误之后，您的模式就会出现，刚好远离屏幕，所以您永远也看不到它。固定位置，然后按预期显示它

    <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>
    • 我将display:block添加到了.modal，但是我在页面加载和关闭按钮工作时会在中间看到该模式，但是当我单击modal（info）按钮时，该模式不会再次显示。有什么我遗漏的吗？对我来说很有用。您的模态显示在第一张幻灯片上，而不是模态信息按钮所在的幻灯片上，这就是您没有看到它的原因。你需要修正定位，它能工作！我认为问题在于#模态叠加并没有随着模态框消失，所以我无法单击信息按钮使其出现。我还将position:fixed和position:absolute更改为.modal，因此它仍保留在幻灯片中。