Bootstrap 模态意外冻结

Question

我正在使用 Boostrap 框架开发一个用本机 HTML、CSS 编写的简单前端页面。我遇到了一些与打开模式相关的问题，打开模式后我无法再与页面的任何元素进行交互。这是感兴趣的代码：

<!DOCTYPE html>

<head>
    <title>3DFlix - Home</title>
    <link href="images/Materiale Sito web/IconaSito.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
          crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div class="header">
        <div class="header-navbar">
            <div class="header-navbar-start">
                <div class="header-navbar-logo">
                    <a href="index.html"><img width="228" height="58" class="logo" 
                        src="images/Materiale Sito web/HEADER_Tavola disegno 1.png"></a>
                </div>
            </div>
            <div class="header-navbar-middle">
                <ul class="header-menu">
                    <li><a href="">Maker/Stampanti</a> <! Fare pagina Maker/Stampanti> </li>
                    <li><a href="">Blog</a> <! Fare pagina Blog> </li>
                    <li><a href="">Chi Siamo</a> <! Fare pagina Chi Siamo> </li>
                </ul>
            </div>
            
            <div class="header-navbar-end">
                <div>
                    <button style="padding-right: 20px; background-color: transparent; 
                        border-color: transparent; color: black; font-size: 20px;" 
                        id="loginButton" class="btn btn-primary dropdown-toggle"
                        data-bs-toggle="dropdown" aria-expanded="false"> Accedi  
                    </button>
                    <div class="dropdown-menu">
                        <input type="text" name="username" placeholder="Username" required><br><br>
                        <input type="password" name="password" placeholder="Password" required><br><br>
                        <input type="submit" value="Login">
                    </div>

                    <button style="background-color: transparent; 
                        border-color: transparent; color: black; font-size: 20px;"
                        id="siginButton" class="btn btn-primary"
                        data-bs-toggle="modal" data-bs-target="#siginModal"
                        aria-expanded="false"> Registrati 
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="siginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Registrati</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <label for="fname">First name:</label>
                                <input type="text" id="fname" name="fname"><br><br>
                                <label for="lname">Last name:</label>
                                <input type="text" id="lname" name="lname"><br><br>
                                <input type="submit" value="Submit">                                
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
                            </div>
                        </div>
                        </div>
                    </div>        

                </div>

            </div>
        </div>
    </div>

    ....
    ....
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" 
            integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" 
            crossorigin="anonymous">
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" 
            integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 
            crossorigin="anonymous">
    </script>

    <script src="script.js"></script>
</body>
</html>

当按下“Registrati”按钮时，我无法执行任何其他操作，例如填写表格、关闭模式或单击按钮，我只能重新加载页面。

更新：这是 style.css 文件：

body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}

a {text-decoration: none; color: black;}

a:hover {color: black;}

.header {
    position: relative;
    box-sizing: inherit;
    z-index: 10;
    padding: 1rem 1rem;
}

.header-navbar {
    position: relative;
    display: flex;
    justify-content: space-between;
}
.header-navbar-start {
    padding-right: 1rem;
    margin-right: 0;
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.header-navbar-logo {
    box-sizing: inherit;
    display: block;
}

.logo{
    display: block;
    max-width: 100%;
    height: auto;
}

.header-navbar-middle {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}

.header-menu {
   justify-content: center;
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   list-style: none; 
   margin-block-start: 1rem;
   margin-block-end: 1rem;
   padding-inline-start: 40px;
   gap: 70px;
   font-size: 20px;
}

.header-navbar-end {
    padding-left: 1 rem;
    flex: 1;
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-size: 20px;
}

.background {
    position: absolute;
    right: 0; left: 0; top: 0;
    overflow: hidden;
    width: 100%; height: 800px;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
}

.wrapper {
    justify-content: flex-start;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: 1200px;
    padding-left: 6vw;
    padding-right: 6vw;
    position: relative;
}

.wrapper-content {padding-top: 400px;}

.title {
    font-size: 40px;
    font-weight: normal;
    pointer-events: none;
}

.subtitle {
    font-size: 25px;
    font-weight: normal;
    pointer-events: none;
    padding-bottom: 10px;
}

.wrapper-button {
    padding: 10px 15px 10px 15px;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border: none;
    position: relative;
    align-items: flex-start;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
    background-color: #eef138b6;
    border-radius: 20px;
    justify-content: flex-start;
    margin-left: 20px;
    box-sizing: content-box;
}

.home-page {
    background-color: #f4f4f4;
    display: block;
    margin-top: 9.8rem;
}

.section-one {
    background-color: white;
    width: 85%; height: 390px;
    margin: auto; display: block; position: relative;
    align-content: center;
    padding: 4rem;
}

.section-columns {
    margin-bottom: 2rem;
    flex-wrap: nowrap;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
}

.section-one-content {
    flex-basis: 0;
    flex-grow: 1;
}

.section-two-content {
    flex-basis: 0;
    flex-grow: 1;
}

.section-three-content {
    flex-basis: 0;
    flex-grow: 1;
}

.section-one-img {
    margin: 0 0 1rem;
    margin-bottom: 2rem;
    box-sizing: inherit;
    display: block;
}

.section-two-img {
    margin: 0 0 1rem;
    margin-bottom: 2rem;
    box-sizing: inherit;
    display: block;
}

.section-three-img {
    margin: 0 0 1rem;
    margin-bottom: 2rem;
    box-sizing: inherit;
    display: block;
}

.one-img {
    margin-left: auto;
    margin-right: auto;
    display: table;
    align-content: center;
}

.two-img {
    margin-left: auto;
    margin-right: auto;
    display: table;
    align-content: center;
}

.three-img {
    margin-left: auto;
    margin-right: auto;
    display: table;
    align-content: center;
}

.section-h {
    margin-bottom: 1rem;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

.stamp-list {
    padding-top: 2rem;
    margin: auto;
    display: block;
    position: relative;
    width: 85%;
    align-content: center;
    box-sizing: border-box;
}

.stamp-list-row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    justify-content: space-between;
}

.list-row-element {
    margin-bottom: 2rem;
}

.element-block {
    border-radius: 5px;
    box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
    background-color: white;
    transition: transform 0.25s;
}

.element-header {
    margin-bottom: 0;
    position: relative;
}

.element-img {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: block;
    width: 100%;
    height: auto;
}

.element-content {
    margin-bottom: 0;
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.content-topbar {
    border-radius: 5px;
    box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
    background-color: white;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -3.25rem 0 1.25rem;
    padding: 0.625rem 1rem;
}

.vendor-info {
    display: flex;
    align-items: center;
}

.vendor-info-img {
    flex: 0 0 2.1875rem;
    margin-right: 0.75rem;
}

.vendor-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.vendor-name {
    font-size: 0.875rem;
    white-space: nowrap;
    margin: 0;
    word-wrap: break-word;
}

.content-middle {
    margin: 0;
    word-wrap: break-word;
}

.content-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(7, 36, 86, 0.075rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-attributes-primary {
    margin-right: 1rem;
    min-width: 0;
    display: flex;
    align-items: center;
}

.attribute-provincia {
    font-size: 1.25rem;
    min-width: 0;
    word-wrap: break-word;
}

.footer-attributes-secondary {
    display: flex;
    align-items: center;
}

.attribute-message {
    display: none;
    width: 380px;
}

.section-newsletter {
    background-color: rgb(204, 204, 204);
    width: 85%; height: 320px;
    display: block;
    position: relative;
    align-content: center;
    margin: auto;
    margin-top: 2rem;
}

.newsletter-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
    box-sizing: inherit;
    padding-left: 3rem;
    padding-right: 3rem;
}

.newsletter-columns {
    margin-bottom: 0;
    flex-wrap: nowrap;
    display: flex;
    box-sizing: border-box;
}

.newsletter-column1 {
    flex-basis: 0;
    flex-grow: 1;
}

.newsletter-column2 {
    flex-basis: 0;
    flex-grow: 1;
}

.column-h {
    margin-bottom: 1rem;
    margin-top: 0;
    text-align: center;
    font-size: 30px;
}

.column-p {
    padding-top: 1rem;
    text-align: center;
    font-weight: 400;
}

.newsletter-form {
    padding: 0.3rem 0.5rem;
    border-radius: 5px;
    border: thin;
}

.checkmark-form {
    margin-right: 0.7rem;
    width: 15px; height: 15px;
}

.button-form {
    background-color: orange;
    border-radius: 20px;
    padding: 0.3rem 0.5rem;
    width: 7rem;
    border-style: groove;
}

.footer {
    flex-wrap: nowrap;
    padding: 1.5rem 0;
    box-sizing: inherit;
    display: flex;
    position: relative;
    padding-right: 2rem;
    padding-left: 2rem;
    width: 100%;
}

.footer-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
    width: 100%;
}

.footer-navbar-logo {
    box-sizing: inherit;
    display: block;
}

.footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 50px;
}

.social-icons {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 30px;
}

Answer 1

您的代码在这里运行良好。我认为您应该向我们展示这些文件的内容：“script.js”和“style.css”

Answer 2

现在我们知道这是一个 css 问题。首先，您应该尝试使 css 文件更清晰...阅读 500 行 css 文件并不容易，因此请尝试通过创建许多与 css 匹配的文件来组织它=37=]组件。示例：一个名为 header.css 的 css 文件用于 header，一个名为 modal.css 的 css 文件用于自定义您的模式，一个名为 css 的文件 hero.css 自定义您的英雄部分等

其次，您应该尝试通过检查元素来了解 bootstrap 在做什么。您会看到 Bootstrap 创建了一个带有“modal-backdrop” class 的 div 元素来为您的模式创建一个“背景”。问题是你做了一些改变 z-index 并隐藏你的模态的东西。因此，您可以尝试组织您的 css 代码并尝试找到特定的 css 行，或者将此行添加到您的 css 中，这将指定正确的 z-index.

.modal-backdrop {
    z-index: 1;
}

Bootstrap 模态意外冻结

Unexpected freezeing with a Boostrap Modal

html

javascript

modal-dialog