代码之家 › 专栏 › 技术社区 › HRS

Javascript模式无法打开

modal-dialog javascript

HRS · 技术社区 · 6 年前

所以我有一个网站,我试图使用modals作为我的登录和注册-但我无法让它们工作。

它是否与我的z索引有关,或者为什么它们不会触发?当我点击我的链接时,绝对什么都没有发生——是因为它们不是按钮吗?

我已经包括了我的HTML、CSS和JavaScript。

HTML

<header>
    <div class="container-header">
        <div class="logo">
            <h1><i class="fab fa-leanpub"></i><span class="highlight">AAU</span>Tutor</h1>
        </div>
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li><a class="button" data-modal="modalLogin">Login</a></li>
                <li><a class="button" data-modal="modalSignUp">Sign Up</a></li>
            </ul>
        </nav>
    </div>
</header>

<section class="modal-windows">
    <div id="modalLogin" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Log in</h3>
                <a class="close">&times;</a>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <a class="message">Sign Up here!</a>
            </div>
        </div>
    </div>
    <div id="modalSignUp" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Log in</h3>
                <a class="close">&times;</a>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <a class="message">Log in here!</a>
            </div>
        </div>
    </div>
</section>

<section class="home-hero">
    <div class="container">
        <h1 class="title">In need of a tutor?
            <span>Find a tutor at AAU for your needs</span>
        </h1>
        <a href="" class="button button-accent">Sign up now!</a>
    </div>
</section>

<div class="container">
    <section class="home-about">
        <div class="home-about-textbox">
            <h1>Who we are</h1>
            <p>AAU Tutor is the best way to find a tutor</p>
            <p>AAU Tutor is a community where members can find a tutor, or tutor other students at AAU</p>
        </div>
    </section>
</div>

<section class="services">
    <div class="container">
        <div class="row">
            <div class="col-4">
                <i class="far fa-calendar-alt fa-5x"></i>
                <h3>See availibility</h3>
                <p>Have a look at the calendar</p>
            </div>
            <div class="col-4">
                <i class="fas fa-tasks fa-5x"></i>
                <h3>Read reviews</h3>
                <p>Read reviews of the tutors</p>
            </div>
            <div class="col-4">
                <i class="fas fa-comments fa-5x"></i>
                <h3>Contact tutors</h3>
                <p>Contact tutors for free</p>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="container">
        <p>AAU Tutor, Copyright &copy; 2018</p>
    </div>
</footer>


<script src="js/main.js"></script>
<script src="js/modal.js"></script>

</body>

CSS

.modal {
  display: none;
  position: fixed;
  z-index: 8888;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba()0, 0, 0, .4;
}

.modal-content {
  background-color: #fefefe;
  margin: 10vh auto;
  padding: 2em;
  border: .25em solid #888;
  width: 90%;
}

@media (min-width:60rem) {
  .modal-content {
      width: 30%;
  }
}

.close {
  color: #aaa;
  float: right;
  font-size: 2em;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

这是我的JavaScript

var modalBtns = [...document.querySelectorAll(".button")];
modalBtns.forEach(function (btn) {
    btn.onclick = function () {
        var modal = btn.getAttribute('data-modal');
        document.getElementById(modal).style.display = "block;"
    }
});

var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function (btn) {
    btn.onclick = function () {
        var modal = btn.closest('.modal');
        modal.style.display = "none";
    }
});

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

2 回复 | 直到 6 年前

HRS 6 年前

正如@Kaddath所说:

文件getElementById(模式)。风格display=“阻止;”应该是“block”,不带分号,这是您的错误。。卡达思

非常感谢!

Swanand Taware 6 年前

你刚才把结束语放错地方了。请更新您的代码,如下所示:

var modalBtns = [...document.querySelectorAll(".button")];
modalBtns.forEach(function(btn){
    btn.onclick = function(e) {
    e.preventDefault();
       var modal = btn.getAttribute('data-modal');
       document.getElementById(modal).style.display = "block";
    }
});

var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
  btn.onclick = function() {
    var modal = btn.closest('.modal');
    modal.style.display = "none";
 }
});

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