我有一个HTML页面。 在HTML页面上，有一个表格。 在此基础上，还有一个表导航栏，允许添加一个项目或添加一个库存。 当单击add item按钮时，我希望有一个表单显示在表上方，供用户填写相关字段以添加项目。 我现在遇到的麻烦是，当我单击add item时，表单只是将我的表向下推到页面底部。 有点像偷了它的地方然后把它挪到一边。 我不想这样。 我希望表单显示在表格的正上方。 我不在乎桌子是否需要消失，变得模糊不清或其他什么。 我还被要求尽可能多地使用bootstrap，所以您将在我的代码中看到它主要是bootstrap。 是的。这是上学用的。 我想使用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中添加样式:
。打开{display:inherit；position:fixed；top:50%；left:50%；transform:translatX（-50%）translateY（-50%）；z-index:1；}
更复杂:创建您自己的模态组件，它可以将您的表单显示为嵌套组件。
如果您可以共享一个Codepen或Codesandbox，那么帮助您就会更容易。
