1
私はウェブページ上にカスタムアラートを表示するいくつかの方法を再利用しようとしました。何らかの理由で、コードは古いページでは正しく動作しますが、新しいページでは正しく動作しません。Divの幅は無視されます
.noPopup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.noPopup .np1 {
text-align: center;
height: 100%;
}
.noPopup .np1:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.noPopup .np2 {
display: inline-block;
vertical-align: middle;
}
.noPopup .np4 {
position: relative;
}
.noPopup .noPclose {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.noPopup .nt1 {
position: absolute;
left: 40px;
top: 25px;
font-family: Arial;
font-size: 18px;
font-weight: bold;
color: white;
}
.noPopup .nt2 {
position: absolute;
left: 110px;
top: 23px;
font-family: Calibri;
font-size: 18px;
color: white;
}
.noPopup .nt22 {
position: absolute;
left: 25px;
top: 23px;
font-family: Calibri;
font-size: 18px;
color: white;
}
.noPopup .ndel {
display: none;
position: absolute;
left: 95px;
top: 20px;
background-color: #9f7709;
width: 2px;
height: 25px;
}
.noPopup .ndel2 {
position: absolute;
left: 95px;
top: 20px;
background-color: #9f7709;
width: 2px;
height: 25px;
}
.noPopup .btnl {
background-image: url('../Images/noPopup/btnl.png');
position: absolute;
top: 21px;
right: 120px;
width: 8px;
height: 21px;
cursor: pointer;
}
.noPopup .btnr {
background-image: url('../Images/noPopup/btnr.png');
position: absolute;
top: 21px;
right: 80px;
width: 8px;
height: 21px;
cursor: pointer;
}
.noPopup .btnClose {
background-image: url('../Images/noPopup/btnClose.png');
position: absolute;
top: 15px;
right: 20px;
width: 36px;
height: 36px;
cursor: pointer;
}
.noPopup .n123 {
position: absolute;
top: -2px;
width: 100%;
}
.noPopup .n789 {
position: absolute;
bottom: -2px;
width: 100%;
}
.noPopup .nc2 {
background-color: #1c1c1c;
border: solid 1px #9f7709;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.noPopup .nc22 {
background-color: #1c1c1c;
border: solid 1px #9f7709;
/*display: table-cell;
vertical-align: middle;*/
}
.noPopup .nc23 {
padding: 2px;
display: table-cell;
vertical-align: middle;
}
.noPopup .nc2if {
background-color: #1c1c1c;
border: solid 1px #9f7709;
max-height: 100%;
max-width: 100%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.noPopup .nc2im {
max-height: 100%;
max-width: 100%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.noPopup .nc {
color: white;
margin: 2px 3px 2px 3px;
background-color: #222222;
padding: 60px 20px 20px 20px;
background-image: url('../Images/noPopup/gex.png');
background-repeat: no-repeat;
background-position: left -60px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.noPopup .n1 {
width: 8px;
height: 8px;
background-image: url('../Images/noPopup/1.png');
float: left;
}
.noPopup .n2 {
margin-left: 8px;
margin-right: 8px;
height: 8px;
background-image: url('../Images/noPopup/2.png');
background-repeat: repeat-x;
background-position: center 2px;
}
.noPopup .n3 {
width: 8px;
height: 8px;
background-image: url('../Images/noPopup/3.png');
float: right;
}
.noPopup .n7 {
width: 8px;
height: 8px;
background-image: url('../Images/noPopup/7.png');
float: left;
}
.noPopup .n8 {
height: 8px;
margin-left: 8px;
margin-right: 8px;
background-position: bottom;
background-image: url('../Images/noPopup/8.png');
background-repeat: repeat-x;
}
.noPopup .n9 {
width: 8px;
height: 8px;
background-image: url('../Images/noPopup/9.png');
float: right;
}<div>
<div class="noPopup" style="z-index:101;width:800px;height:0%;top:200px;left:74px">
<div class="np1">
<div class="np2">
<div class="noPclose"></div>
<div class="np4">
<div class="btnClose" onclick="destroyLastMessage();"></div>
<div style="left:24px" class="nt1">Title</div>
<div class="nt22"></div>
<div class="ndel"></div>
<div class="n123">
<div class="n1"></div>
<div class="n3"></div>
<div class="n2"></div>
</div>
<div class="n789">
<div class="n7"></div>
<div class="n9"></div>
<div class="n8"></div>
</div>
<div class="nc">
<div style="text-align:left">
Text
<br>
<table width="100%">
<tbody>
<tr>
<td width="100%" align="right"><span onclick="remindPassword(document.getElementById('txtForgotPasswordName').value)" class="button">Button</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>問題は、次のとおりです。
widthが800ピクセルに設定されているdivさん、それは無視されていますが。
なぜでしょうか？
を使用しないでください/ help/mcve –