html - 如何设置模态标题固定？
问题描述
我创建了一个具有标题标签或标题的模式，但我希望它处于固定位置并且在滚动模式时不会滚动。
#empDetailsLabel{
background-color: #203A43 ;
height: 5%;
width: 100%;
padding: 10px;
position: fixed;
}
empDetailsLabel 是模态标题的 div 的 ID。我已经将位置设置为固定，但是当我向下滚动时标题仍然消失。
HTML视图按钮模态：
<a href="#Employee" id="view">View</a>
<input type="button" id="delete" value="Delete">
<div class="viewEmp" id="Employee">
<div class="empContainer">
<div id="empDetailsLabel">
<label>Employee Details</label>
</div>
<label class="labelPerInfo">Personal Information</label><br><br>
<div id="personalInfo1">
<label>First Name</label><br>
<input type="text" id="firstName" readonly/><br><br>
<label style="font-size: small;">Last Name</label><br>
<input type="text" id="lastName" readonly/><br><br>
<label>Address</label><br>
<textarea id="address" cols="2" rows="3" style="resize:none" readonly></textarea><br><br>
<label>Email</label><br>
<input type="email" id="email" readonly/><br><br>
</div>
<div id="personalInfo2">
<label>Middle Name</label><br>
<input type="text" id="middleName" readonly/><br><br>
<label>Gender</label><br>
<input type="text" id="gender" readonly/><br><br>
<label>Date of Birth</label><br>
<input type="text" id="bday" readonly/><br><br><br>
<label>Contact Number</label><br>
<input type="number" id="contactNo" readonly/><br><br>
</div>
<hr class="new1" width="100%"/>
<div id="workInfo">
<label class="labelPerInfo">Work Information</label><br><br>
<div id="personalInfo1">
<label>First Name</label><br>
<input type="text" id="firstName" readonly/><br><br>
<label style="font-size: small;">Last Name</label><br>
<input type="text" id="lastName" readonly/><br><br>
<label>Address</label><br>
<textarea id="address" cols="2" rows="3" style="resize:none" readonly></textarea><br><br>
<label>Email</label><br>
<input type="email" id="email" readonly/><br><br>
</div>
<div id="personalInfo2">
<label>Middle Name</label><br>
<input type="text" id="middleName" readonly/><br><br>
<label>Gender</label><br>
<input type="text" id="gender" readonly/><br><br>
<label>Date of Birth</label><br>
<input type="text" id="bday" readonly/><br><br><br>
<label>Contact Number</label><br>
<input type="number" id="contactNo" readonly/><br><br>
</div>
</div>
<a href="#" id="close">Close</a>
</div>
</div>
这是将打开模态和模态本身的视图按钮。
解决方案
在这种情况下，您需要使用sticky，但是由于您已经在顶部固定了一些东西，您需要设置顶部位置来告诉它它也粘在哪里。看这里：
body {
background-color: #d9d9d9;
padding: 0;
margin: 0;
}
.titleBar{
background-color: #203A43;
height: 40px;
width: 100%;
}
.titleBar input[type=button]{
height: 100%;
width: 15% ;
outline: none;
border: none;
background-color: #203A43;
color: white;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.titleBar input:hover{
background-color:#325a67;
}
.titleBar input:focus{
border-bottom-style: solid;
border-bottom-color: #325a67
}
#executives{
margin-top: 5%;
width: 1260px;
font-family: 'Lucida Sans';
color: white;
border: 1px solid white;
text-align: center;
height: 120px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
th{
background-color: #203A43;
color: white;
}
#executives td #executives th{
border: 1px solid #ddd;
border-width: 1000px;
padding: 8px;
}
tr{
color: black;
height: 40px;
}
tr:nth-child(even){
background-color:#dddddd;
}
td input{
border-radius: 5px;
width: 50px;
height: 25px;
outline: none;
border: none;
}
#view {
background-color: #2eb82e;
text-decoration:none;
color: black;
font-size: medium;
border-radius: 15%;
padding: 2%;
}
#view:hover{
background-color: #29a329;
}
#delete{
background-color: #e62e00;
}
#delete:hover{
background-color: #cc2900;
}
#close{
float: right;
margin: 5%;
}
.empContainer{
position: fixed;
background-color: rgb(255, 255, 255);
border: 1px solid #000;
left: 50%;
border-radius: 5px;
width: 1000px;
max-width: 100%;
overflow-y: scroll;
height: 400px;
max-height: 100%;
-webkit-transform: translate(-50%, -200vh);
-ms-transform: translate(-50%, -200vh);
transform: translate(-50%, -200vh);
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.viewEmp:before{
content: "";
position: fixed;
display: none;
background-color:rgba(0, 0, 0, 0.8);
top:0;
left:0;
height: 100%;
width: 100%;
}
.viewEmp:target .empContainer{
top: 20%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.viewEmp:target:before{
display: block;
}
#empDetailsLabel{
background-color: #203A43 ;
height: 5%;
width: 100%;
padding: 10px;
position: sticky;
top: 0;
}
#empDetailsLabel label{
color: white;
}
#personalInfo1{
text-align: left;
padding-top: 20px;
float: left;
max-width: 100%;
}
#firstName{
border: gray solid 1px;
width: 250px;
}
#middleName{
border: gray solid 1px;
width: 250px;
}
#lastName{
border: gray solid 1px;
width: 250px;
}
#gender{
border: gray solid 1px;
width: 250px;
}
#address{
border: gray solid 1px;
width: 250px;
}
#email{
border: gray solid 1px;
width: 250px;
}
#contactNo{
border: gray solid 1px;
width: 250px;
}
#bday{
border: gray solid 1px;
width: 250px;
}
#personalInfo2{
padding-left: 200px;;
text-align: left;
padding-top: 20px;
max-width: 100%;
float: left;
width: 300px
}
.labelPerInfo{
float: left;
padding-top: 20px;
padding-left: 20px;
}<a href="#Employee" id="view">View</a>
<input type="button" id="delete" value="Delete">
<div class="viewEmp" id="Employee">
<div class="empContainer">
<div id="empDetailsLabel">
<label>Employee Details</label>
</div>
<label class="labelPerInfo">Personal Information</label><br><br>
<div id="personalInfo1">
<label>First Name</label><br>
<input type="text" id="firstName" readonly/><br><br>
<label style="font-size: small;">Last Name</label><br>
<input type="text" id="lastName" readonly/><br><br>
<label>Address</label><br>
<textarea id="address" cols="2" rows="3" style="resize:none" readonly></textarea><br><br>
<label>Email</label><br>
<input type="email" id="email" readonly/><br><br>
</div>
<div id="personalInfo2">
<label>Middle Name</label><br>
<input type="text" id="middleName" readonly/><br><br>
<label>Gender</label><br>
<input type="text" id="gender" readonly/><br><br>
<label>Date of Birth</label><br>
<input type="text" id="bday" readonly/><br><br><br>
<label>Contact Number</label><br>
<input type="number" id="contactNo" readonly/><br><br>
</div>
<hr class="new1" width="100%"/>
<div id="workInfo">
<label class="labelPerInfo">Work Information</label><br><br>
<div id="personalInfo1">
<label>First Name</label><br>
<input type="text" id="firstName1" readonly/><br><br>
<label style="font-size: small;">Last Name</label><br>
<input type="text" id="lastName1" readonly/><br><br>
<label>Address</label><br>
<textarea id="address" cols="2" rows="3" style="resize:none" readonly></textarea><br><br>
<label>Email</label><br>
<input type="email" id="email1" readonly/><br><br>
</div>
<div id="personalInfo2">
<label>Middle Name</label><br>
<input type="text" id="middleName1" readonly/><br><br>
<label>Gender</label><br>
<input type="text" id="gender1" readonly/><br><br>
<label>Date of Birth</label><br>
<input type="text" id="bday1" readonly/><br><br><br>
<label>Contact Number</label><br>
<input type="number" id="contactNo1" readonly/><br><br>
</div>
</div>
<a href="#" id="close">Close</a>
</div>
</div>推荐阅读
- r - 具有特定模式的栅格图层上的采样点
- java - 如何使用 C# 作为目标语言在 Antlr 中修复“当前上下文中不存在字符/_input”？
- vue.js - 从源“http://localhost:3000”访问“https://***”处的 XMLHttpRequest 已被 CORS 策略阻止
- angular - 在 Angular 中使用 ngModel 时向 ngrx/store 发送操作
- entity-framework - EF6 是否静默执行无法转换客户端的表达式？
- mysql - Node 和 Axios - 如何发出顺序请求
- kotlin - 如何按值更改对对象进行分组
- c# - 未找到记录时为不可为空的列返回 null
- javascript - 替换标签中的文本
- perl - aix-ksh - 删除包含特殊字符的字符串