Question

我对这款游戏还很陌生，我正在尝试创建一个网站，并使用一些新的技巧。

我正在对一组按钮进行编码，而不是转到另一页面，而是弹出窗口（我认为是这种模式？）

当我将所有脚本都用HTML编写时，它很好用，但是当我将代码放在外部时，对我来说却不起作用。

仅当前正在处理有关按钮

var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function(){
    modal.style.display = "block";}
span.onclick = function (){
    modal.style.display = "none";}
window.onclick = function (event){
    if(event.target === modal) {
        modal.style.display = "none";}}

*
{
margin: 0;
padding: 0;
}

header
{
background-image: url("../images/webBack.jpg");
    background-color: powderblue;
    height: 100vh;
    background-size: cover;
    background-position: center;


}
a{
    color: black;
}
a:hover{
    color:white;
    transition-duration: 0.3s;

}
.row{
    position: center;
    max-width: 95%;
    margin: auto;


}

.logo img{
    width: 150px;
    height: auto;
    float: left;
}
.main-nav{
    float:right;
    list-style:none;
    margin-top: 30px;

}
.main-nav li{
    display: inline-block;
}

.button1 {
    background-color: cornflowerblue;
    opacity: 0.2;
    font-size: 16px;
    text-align: center;
    padding: 14px 28px;
    border: 2px solid black;
    transition-duration: 0.2s;
    cursor: pointer;
}
.button1:hover{
    background-color: cornflowerblue;
    color: white;
    opacity: 1;
    font-size: 18px;

}
.modal{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content{
    background-color: aliceblue;
    margin-top: 150px;
    margin-left: 25%;
    padding: 20px;
    border: 2px solid whitesmoke;
    width: 50%;
    height: 50%;
    overflow: auto;
}
.close{
    color: gray;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
body{
    font-family: monospace;

}

.Hero{
    position: absolute;
    margin: 500px;
    margin-left: 25%;
    margin-top: 0;
    pointer-events:none;
}

h1{
    color:white;
    text-transform: uppercase;
    font-size: 60px;
    text-align: center;
    margin-top: 275px;

}
p{
    color: black;
    font-size: 16px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Portia Dance Sports Therapy</title>
    <link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
    <header>
        <div class="row">
            <div class="logo">
                <img src="images/Logo.png">
            </div>
    <script src="scripts/main.js"></script>
            <ul class="main-nav">
                <li><button class = button1><a href = "src/about.html">Home</a></button></li>
                <li><button id="about" class = button1>About</button></li>
                <li><button class = button1><a href=""> What is? </a></button></li>
                <li><button class = button1><a href=""> Contact </a></button></li>
                <li><button class = button1><a href=""> FAQ </a></button></li>
            </ul>
        </div>
        <div class="Hero">
            <h1>Portia Sports Therapy</h1>
        </div>
    </header>
    <div id="aboutMod" class="modal">
        <div class="modal-content">
            <span class="close">&times</span>
            <p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
                so that makes me shit hot at this therapy business! <br>
                So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
        </div>
    </div>

</body>
</html>

在代码段中有效...

我正在使用IntelliJ

也许是HTML中的内容？我不知道。

Answer 1

您要在元素存在之前引用脚本。它们存在后，只需引用该脚本即可。尝试将您的脚本标签放在最终正文标签上方。我对您的代码进行了测试，即可完成这项工作。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Portia Dance Sports Therapy</title>
    <link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
    <header>
        <div class="row">
            <div class="logo">
                <img src="images/Logo.png">
            </div>
            <ul class="main-nav">
                <li><button class = button1><a href = "src/about.html">Home</a></button></li>
                <li><button id="about" class = button1>About</button></li>
                <li><button class = button1><a href=""> What is? </a></button></li>
                <li><button class = button1><a href=""> Contact </a></button></li>
                <li><button class = button1><a href=""> FAQ </a></button></li>
            </ul>
        </div>
        <div class="Hero">
            <h1>Portia Sports Therapy</h1>
        </div>
    </header>
    <div id="aboutMod" class="modal">
        <div class="modal-content">
            <span class="close">&times</span>
            <p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
                so that makes me shit hot at this therapy business! <br>
                So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
        </div>
    </div>
    <script src="scripts/main.js"></script>
</body>
</html>

或者，如果您希望将script标记保留在原处，则可以告诉JS在页面准备好后执行。尽管下面的代码可能无法完全与跨浏览器兼容，但是您也可以使用Jquery代替纯JavaScript，而JavaScript应该绝对可以与跨浏览器兼容。

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

r(function(){
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function(){
    modal.style.display = "block";}
span.onclick = function (){
    modal.style.display = "none";}
window.onclick = function (event){
    if(event.target === modal) {
        modal.style.display = "none";}}
        });

如果您决定在HTML中包含Jquery，则可以这样做。

$( document ).ready(function() {
        var modal = document.getElementById("aboutMod");
    var btn = document.getElementById("about");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function(){
        modal.style.display = "block";}
    span.onclick = function (){
        modal.style.display = "none";}
    window.onclick = function (event){
        if(event.target === modal) {
            modal.style.display = "none";}}
});

如果您想尝试jquery解决方案，只需将其放在您的head标签之间。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

脚本在html中有效，但在外部不起作用

1 个答案: