HTML模态在按钮被点击时不显示，并且在隐藏时取代其他元素

我不知道哪里出了问题。这是我第一次使用情态动词，但有必要允许我的用户注册服务。我正在跟随引导教程的模态，因此为什么他们是样板的时刻。当"注册"时，我无法显示它。按钮被点击。

现在的模式是移动我当前所有的html元素，但不会显示当按钮被点击。

<section>
<div class="page-header min-vh-100">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
{{ form.csrf_token }}
<div id="login-card" class="card card-plain">
<div class="card-header pb-0 text-left">
<h4 class="font-weight-bolder">Welcome back</h4>
<p class="mb-0">Sign in to start exploring Fellos' podcast builder</p>
</div>
<div id="signincard" class="card-body">

<div id="emaildiv">
{{form.email}}
</div>
<div id="passworddiv">
{{form.password}}
</div>
<input class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0" id="login-button" name="submit" type="button" value="Sign In" data-clipboard-target="#query">
<div id="forgot_or_signup">
<button id="forgotpass" type="button">Forgot Password?</button>
<button id="sign_up" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Sign Up!
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>


</div>

</div>

<div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
<div class="position-relative h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center" style="background-color: black;">
<img src="{{ url_for('static', filename='assets/img/shapes/pattern-lines.svg') }}" alt="pattern-lines" class="position-absolute opacity-8 start-0">
<div class="position-relative mt-6">
<img class="max-width-500 w-100 position-relative z-index-2" src="{{ url_for('static', filename='assets/img/WELLFOUND_EMBLEM_WHITE.png') }}" alt="image">
</div>
</div>
</div>
</div>
</div>
</div>
</section>

如果你使用的是bootstrap 5.3，那么你需要改变这个属性。

在注册按钮中，将data-togglein更改为data-bs-toggle

<button id="sign_up" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Sign Up! </button>

作为从data-dismiss到data-bs-dismiss的模态关闭按钮

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

在你自己的测试。

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</head>
<body>
<section>
<div class="page-header min-vh-100">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
{{ form.csrf_token }}
<div id="login-card" class="card card-plain">
<div class="card-header pb-0 text-left">
<h4 class="font-weight-bolder">Welcome back</h4>
<p class="mb-0">Sign in to start exploring Fellos' podcast builder</p>
</div>
<div id="signincard" class="card-body">
<div id="emaildiv">
{{form.email}}
</div>
<div id="passworddiv">
{{form.password}}
</div>
<input class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0" id="login-button" name="submit" type="button" value="Sign In" data-clipboard-target="#query">
<div id="forgot_or_signup">
<button id="forgotpass" type="button">Forgot Password?</button>
<button id="sign_up" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Sign Up!
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>

相关内容

最新更新

热门标签：