in the html document, there are some div that need to be set position="relative" . Today, you need to add a pop-up box. The implementation code is as follows:
<div class="dialog-wrap" style="width: 400px;">
<!-- <div class="dialog-cover" v-if="isShow"></div> -->
<div class="dialog-content" v-if="isShow">
<div class="dialog-title-wrap">
<!-- <div class="dialog-title">{{ alertTitle }}</div> -->
<img class="dialog-close" @click="closeMyself" src="../../assets/imgs/close.svg" alt="">
</div>
<div>
<div class="ipt-wrap">
<base-input></base-input>
</div>
<div class="ipt-wrap">
<base-input></base-input>
</div>
<button class="btn"></button>
</div>
</div>
</div>
<style>
.ipt-wrap{
margin: 20px;
}
.dialog-wrap {
position: fixed;
width: 400px;
overflow: hidden;
height: auto;
/* width: 100%;
height: 100%; */
}
.dialog-cover {
background: -sharp000;
opacity: .3;
position: fixed;
z-index: 99999999998;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.dialog-content {
width: 400px;
/* height: 400px; */
overflow: hidden;
position: fixed;
max-height: 200%;
/* overflow: auto; */
background: -sharpfff;
/* top: 18%; */
z-index: 99999999999;
/*border: 2px solid -sharp464068;*/
/*padding: 2%;*/
/* line-height: 1.6; */
margin:auto;left:0; right:0;
/*height: 500px;*/
border-radius: 2px;
box-shadow: 1px 1px 50px rgba(0,0,0,.3);
/**/
top: 50%;
transform: translateY(-50%);
}
.dialog-title-wrap{
position: relative;
height: 40px;
/* line-height: 74px; */
/* background-color: -sharp5e87f5; */
}
.dialog-title{
font-weight: 900;
color: -sharpffffff;
padding-left: 26px;
}
.dialog-close {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.dialog-close:hover {
color: -sharp4fc08d;
}
will appear as follows (the red arrow points to the input box on the page, the outer layer of the div, is covered with the position="relative" because the outer div of the input needs to be followed by the symbol), and the pop-up box uses fiexd to locate, how to deal with this problem? :
