javascript - 如何使按钮在网页上显示表单
问题描述
我有一个 HTML 页面。在 HTML 页面上，有一个表格。最重要的是，有一个表格导航栏，允许您添加项目或添加库存。单击添加项目按钮时，我希望在表格上显示一个表单，供用户填写相关字段以添加项目。我遇到的麻烦是，我现在的方式是，当我单击添加项目时，表单只是将我的表格推向页面底部。有点像偷走它的位置并将它移到一边。我不想要这个。我希望表单显示在表格的正上方。我不在乎桌子是否需要消失，变得模糊或任何事情。我还需要尽可能多地使用引导程序，所以你会在我的代码中看到它主要是引导程序。是的，这是给学校的。我正在考虑使用 JavaScript 通过单击操作来显示/隐藏表单和表格，但我不知道该怎么做。我愿意接受所有建议。代码如下。
的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/test.css">
<script src="https://kit.fontawesome.com/10c015ffd4.js" crossorigin="anonymous"></script>
<title>Case Medical | Items List</title>
</head>
<body>
<!----------------------------------------------------------TOP-BAR---------------------------------------------------->
<nav class="navbar navbar-expand-sm top-bar">
<div class="navbar-brand text-light">SCHOOL WORK</div>
<div class="d-flex ml-auto">
<span class="navbar-text d-none d-sm-block text-light">Hello,</span>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link text-light ID-HOLDER">ME<i class="fas fa-chevron-down fa-fw d-none d-sm-inline-block"></i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><i class="flex-nowrap fas fa-sign-out-alt fa-lg fa-fw"></i></a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row first-row">
<!--------------------------------------------------------SIDE-BAR----------------------------------------------------->
<div class="col-4 col-lg-2 side-bar">
<form class="form-inline d-flex justify-content-center md-form form-sm active-cyan-1 mt-4">
<input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search"
aria-label="Search">
<i class="fas fa-search" aria-hidden="true"></i>
</form>
<ul class="nav flex-column mt-2 sticky-top">
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-home fa-lg fa-fw side-icon" aria-hidden="true"></i>
<span class="side-text">Home</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-paperclip fa-lg fa-fw side-icon" aria-hidden="true"></i>
<span class="side-text">Items</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-box fa-lg fa-fw side-icon" aria-hidden="true"></i>
<span class="side-text">Inventory</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-map-marked-alt fa-lg fa-fw side-icon" aria-hidden="true"></i>
<span class="side-text">Locations</span>
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
<i class="fas fa-clipboard-list fa-lg fa-fw side-icon" aria-hidden="true"></i>
<span class="side-text">Inventory Orders</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-address-book fa-lg fa-fw side-icon" aria-hidden="true"></i>
<span class="side-text">Suppliers</span>
</a>
</li>
</ul>
</div>
<!--------------------------------------------------------------------------------------------------------------------->
<div class="col-8 col-lg-10 main-area">
<!---------------------------------------------------ITEMS NAV--------------------------------------------------------->
<div class="row mt-3 mx-auto table-nav">
<div class="col my-auto d-flex justify-content-end">
<span class="align-middle mr-auto text-white">Items List</span>
<button type="button" class="btn btn-dark" data-toggle="modal" data-target="#itemModal">
Add Item
</button>
<button class="btn btn-dark ml-2" type="button" data-toggle="collapse" data-target="#ADD-INVENTORY-FORM" aria-expanded="false" aria-controls="ADD-INVENTORY-FORM">
Add Inventory
</button>
</div>
</div>
<!---------------------------------------------------ITEMS MODAL------------------------------------------------------->
<div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="itemModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="itemModalLabel">Add New Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-6">
<input type="text" class="form-control" id="ID-NUMBER" placeholder="ID">
</div>
<div class="form-group col-6">
<input type="text" class="form-control" id="UDI-NUMBER" placeholder="UDI">
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="NAME" placeholder="Name">
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="IMAGE-UPLOAD">
<label class="custom-file-label" for="IMAGE-UPLOAD">Image Upload</label>
</div>
<div class="form-group">
<textarea class="form-control" id="DESCRIPTION" rows="3" placeholder="Description"></textarea>
</div>
<div class="form-group">
<input type="text" class="form-control" id="DIMENSIONS" placeholder="Dimensions">
</div>
<div class="form-group">
<input type="text" class="form-control" id="PRICE" placeholder="Price (USD)">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Category">
<div class="input-group-append">
<button class="btn btn-dark" type="button" data-toggle="modal" data-target="#itemSelectModal">Select Category</button>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<input type="text" class="form-control" id="LOCATION-NAME" placeholder="Location Name">
</div>
<div class="form-group col-6">
<input type="text" class="form-control" id="LOCATION-ID" placeholder="Location-ID">
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<input type="text" class="form-control" id="ROOM" placeholder="Room">
</div>
<div class="form-group col-6">
<input type="text" class="form-control" id="Shelf" placeholder="Shelf">
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<input type="text" class="form-control" id="CABINET" placeholder="Cabinet">
</div>
<div class="form-group col-6">
<input type="text" class="form-control" id="BIN" placeholder="Bin">
</div>
</div>
<button class="btn btn-dark LOCATION-BUTTON mb-3" type="button">Select Location</button>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Supplier">
<div class="input-group-append">
<button class="btn btn-dark" type="button">Select Supplier</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Back</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
<!-------------------------------------------------- CATEGORY MODAL --------------------------------------------------->
<div class="modal fade" id="itemSelectModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">×</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>
<!---------------------------------------------------ITEMS TABLE------------------------------------------------------->
<div class="container table-container p-0">
<table class="table table-light mt-3 mx-auto table-striped table-hover items-table">
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">ID #</th>
<th scope="col">Name</th>
<th scope="col">Category</th>
<th scope="col">Default Location</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td></td>
<td>#</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>
<div class="dropdown">
<button class="btn p-0 m-0 actions" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">View</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--------------------------------------------------------------------------------------------------------------------->
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
CSS：
html, body {
height: 100vh;
}
/**********************************************************************************************************************/
/***************************************************** TOP BAR ********************************************************/
.top-bar {
background: #478CA4;
}
.fa-sign-out-alt {
color: #FFFFFF;
}
/**********************************************************************************************************************/
/**************************************************** SIDE BAR ********************************************************/
.side-icon, .side-text {
color: #4D4D4D;
}
.side-bar {
background: #E1E1E1;
height: available;
}
.first-row {
height: 100vh;
}
.side-text:hover {
color: #478CA4;
}
/**********************************************************************************************************************/
/************************************************** ITEMS TABLE *******************************************************/
.main-area {
height: available;
width: 100%;
}
.table-nav {
background: #478CA4;
width:100%;
height: 60px;
}
.table-container {
height: 600px;
overflow-y: scroll;
}
.add-inventory-button, .add-item-button{
background: #36788F;
}
/**********************************************************************************************************************/
解决方案
有多种方法。您所描述的是经典的“模态”功能。
最简单的方法可能是（如评论中所述）：使用引导模式。
您可以使用 display: none; 隐藏表单 并显示：继承；什么时候应该显示表格。您可以使用 document.getElementById("formId").classList.add("open"); 将类添加到表单中。然后在你的css中添加样式：
.open { 显示：继承；位置：固定；最高：50%；左：50%；变换：translatX(-50%) translateY(-50%); z-index：1；}
更复杂：创建您自己的模态组件，可以将您的表单显示为嵌套组件。
如果您可以共享 Codepen 或 Codesandbox，那么帮助您会更容易。
推荐阅读
- javascript - viewer.js 在 IE 11 中的选项卡切换处触发 addEventListener 调整大小，导致错误和崩溃
- html - sp_notify_operator 的 T-SQL Server 代理格式化消息
- selenium - 在 Selenium 中处理 Windows 打开文件对话框
- javascript - 将数组添加到多维数组或对象中
- c# - 未找到密钥异常 - Unity Json
- java - 通用对象的 HashCode 实现
- nlp - 如何从训练文本中构建干净的词汇表？
- ruby-on-rails - Rails logger 删除日志文件后也不释放日志文件；它不断占用磁盘空间
- javascript - 从 Angular 6 防护中的 BehaviorSubject 返回值
- javascript - 重新加载 Img 源时 ReactJS 内存泄漏