html - 1页上的Bootstrap 2模态?
问题描述
我正在尝试在一个页面上制作 2 个模式,一个用于登录表单,另一个用于注册表单。以下是声明
<div class="modal fade" id="signUpModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-hidden="true">
以下是显示模态的链接:
<a class="nav-link" data-toggle="modal" data-target="#signUpModal">Sign Up</a>
<a class="nav-link" data-toggle="modal" data-target="#signInModal">Sign In</a>
当我单击指向#signUpModal 的链接时,它工作正常,但是当我单击指向#signInModal 的链接时,没有任何反应,没有显示模式。如果我然后单击指向#signUpModal 的链接,则#signInModal 然后显示堆叠在#signUpModal 的顶部。
如何让第二个模态正确显示?
解决方案
使用代码如下:
笔记!
注意你没有设置相同的id
两次......id
是唯一的,你可以在每个页面中使用它一次(例如:id="exampleModalLabel"
所以在第二个模型集中id="exampleModalLabel2"
)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalIn">
Sing in
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalIn" 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">Sing in</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalOut">
Sign out
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalOut" 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="exampleModalLabel2">Sign out</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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>
推荐阅读
- python - 从 csv 读取数据并将其动态添加到分页 url 时出现 Scrapy key 错误
- python - 我正在尝试使用 python Jupiter Notebook 运行 xgboost,但出现此错误: AttributeError: module 'xgboost' has no attribute 'set_params'
- windows - 如何根据文件属性列出文件夹和子文件夹中的所有文件,特别是具有 ALOM 属性的文件(Windows 10)?
- android - gradle 依赖版本排序不正确
- javascript - 实现 React 设计系统时构建 NodeJS 时出错
- java - 部署到 Wildfly 失败消息:未定义(CORBA.INTERNAL:次要代码:208)
- node.js - Electron - 限制渲染器的 Internet 访问
- php - 在 php 中设置 Adwords 转换脚本
- flutter - Flutter 对象未在函数内部初始化
- reactjs - Redux Thunk:Redux Thunk 未在我的屏幕上显示来自 Jsonplaceholder 的数据