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

模式未通过按钮关闭

modal-dialog javascript

maverickar · 技术社区 · 2 年前

我有以下对话框:

const gridContainer = document.querySelector(".grid-container");
const addBookBtn = document.querySelector("#add-book-btn");
const dialog = document.querySelector("dialog");
const dialogCloseBtn = document.querySelector("#dialog-close-btn")
addBookBtn.addEventListener('click', () => dialog.showModal());
dialogCloseBtn.addEventListener('click', () => dialog.close());

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
}

.container {
    display: grid;
    grid-template-rows: 150px 3fr;
}

.header {
    background-color: white ;
    font-size: 1.6rem;
    font-weight: 900;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 5vw;
    box-shadow: 0 5px 5px darkgray;
    z-index: 1;
}

.main-content {
    background-color: lightgray;
    display: grid;
    grid-template-rows: 150px 4fr;
}

.main-content>button {
    grid-column: 1 / -1;
    width: 200px;
    height: 60px;
    margin: 20px;
    background-color: silver;
    border: none;
    box-shadow: 0px 2px 4px darkgray;
    border-radius: 15px;
    justify-self: center;
    align-self: center;
    font-size: 1.5rem;
    font-family: 'Poppins', sans-serif; /* why does it not inherit the family? */
}

.main-content>button:hover {
    background-color: darkgray;
}

.grid-container {
    display: grid;
    padding: 0 5rem 5rem 5rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    gap: 4em
}

.book-card {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 1px 4px darkgray;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 30px;
    font-size: 1.4rem;
}

.book-card>p {
    margin: 0;
}

.remove-btn {
    font-size: 1.3rem;
    border-radius: 5px;
    width: 100px;
    height: 50px;
    box-shadow: 0px 2px 4px darkgray;
}

.remove-btn:hover {
    background-color: red;
}

dialog {
    display: flex;
    max-height: auto;
    max-width: auto;
    z-index: 10;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.modal>form {
    font-size: 1.1rem;
    display: grid;
    grid-template: repeat(5, 1fr) / 1fr 1fr;
    gap: 15px;
}

::backdrop {
    opacity: 0.5;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Library</title>
    <script src="main.js" defer></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Chicle&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>library</h1>
        </div>
        <div class="main-content">
            <button type="button" id="add-book-btn">+ Add book</button>
            <div class="grid-container"></div>
        </div>
    </div>

    <div>
        <dialog class="modal">
            <form method="dialog">
                <label for="author">Author</label>
                <input type="text" id="author" placeholder="J.R.R. Tolkien">
                <label for="title">Title</label>
                <input type="text" id="title" placeholder="The Lord of The Rings">
                <label for="pages">Pages</label>
                <input type="number" id="pages"> 
                <label for="read">Have you read it?</label>
                <input type="checkbox" id="read">
                <button type="submit">Submit</button>
                <button type="submit" id="dialog-close-btn">Close</button>
            </form>
        </dialog>
    </div>
</body>
</html>

然而,不知怎么的,它不能正常工作。我看到背景变回了不那么暗,但模态仍然存在。我做错了什么?虽然当我在这里试用时,它看起来很有效。它可以是VSC吗?我找到的所有答案都与我没有使用的Bootstrap有关。。。

1 回复 | 直到 2 年前

Rory McCrossan Hsm Sharique Hasan 2 年前

问题是因为你的模态 dialog 始终可见。您需要将其设置为 display: none 默认情况下 display: flex 什么时候 showModalDialog() 被调用。

要做到这一点,您可以对CSS进行以下更改:

dialog {
  display: none;
  /* other properties... */
}

dialog[open] {
  display: flex;
}

以下是一个完整的工作示例:

const gridContainer = document.querySelector(".grid-container");
const addBookBtn = document.querySelector("#add-book-btn");
const dialog = document.querySelector("dialog");
const dialogCloseBtn = document.querySelector("#dialog-close-btn")
addBookBtn.addEventListener('click', () => dialog.showModal());
dialogCloseBtn.addEventListener('click', () => dialog.close());

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
}

.container {
  display: grid;
  grid-template-rows: 150px 3fr;
}

.header {
  background-color: white;
  font-size: 1.6rem;
  font-weight: 900;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 5vw;
  box-shadow: 0 5px 5px darkgray;
  z-index: 1;
}

.main-content {
  background-color: lightgray;
  display: grid;
  grid-template-rows: 150px 4fr;
}

.main-content>button {
  grid-column: 1 / -1;
  width: 200px;
  height: 60px;
  margin: 20px;
  background-color: silver;
  border: none;
  box-shadow: 0px 2px 4px darkgray;
  border-radius: 15px;
  justify-self: center;
  align-self: center;
  font-size: 1.5rem;
  font-family: 'Poppins', sans-serif;
  /* why does it not inherit the family? */
}

.main-content>button:hover {
  background-color: darkgray;
}

.grid-container {
  display: grid;
  padding: 0 5rem 5rem 5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  gap: 4em
}

.book-card {
  background-color: white;
  border-radius: 15px;
  box-shadow: 0px 1px 4px darkgray;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 30px;
  font-size: 1.4rem;
}

.book-card>p {
  margin: 0;
}

.remove-btn {
  font-size: 1.3rem;
  border-radius: 5px;
  width: 100px;
  height: 50px;
  box-shadow: 0px 2px 4px darkgray;
}

.remove-btn:hover {
  background-color: red;
}

dialog {
  display: none;
  max-height: auto;
  max-width: auto;
  z-index: 10;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

dialog[open] {
  display: flex;
}

.modal>form {
  font-size: 1.1rem;
  display: grid;
  grid-template: repeat(5, 1fr) / 1fr 1fr;
  gap: 15px;
}

::backdrop {
  opacity: 0.5;
}

<link href="https://fonts.googleapis.com/css2?family=Chicle&family=Poppins&display=swap" rel="stylesheet">

<div class="container">
  <div class="header">
    <h1>library</h1>
  </div>
  <div class="main-content">
    <button type="button" id="add-book-btn">+ Add book</button>
    <div class="grid-container"></div>
  </div>
</div>

<div>
  <dialog class="modal">
    <form method="dialog">
      <label for="author">Author</label>
      <input type="text" id="author" placeholder="J.R.R. Tolkien">
      <label for="title">Title</label>
      <input type="text" id="title" placeholder="The Lord of The Rings">
      <label for="pages">Pages</label>
      <input type="number" id="pages">
      <label for="read">Have you read it?</label>
      <input type="checkbox" id="read">
      <button type="submit">Submit</button>
      <button type="submit" id="dialog-close-btn">Close</button>
    </form>
  </dialog>
</div>