あなたの助けが必要です。
カスタム アラート ボックスの中央とテキストの直後に [OK] ボタンを表示できるように、HTML/CSS プロパティを調整するにはどうすればよいですか?
これを行う方法については、私の人生では理解できません。=\
何が起こっているかは次のとおりです。
ここに私の望ましい結果があります：
html マークアップは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
visibility: hidden;
}
#alertBox_container {
background: rgb(212,208,200);
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#alertBox_titlebar {
height: 22px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
font-weight: bold;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
#alertBox_btn{
position: relative;
width: 40px;
height: auto;
text-align: center;
}
</style>
<script type="text/javascript">
//alertBox('text','ok')
function alertBox(text) {
document.getElementById('alertBox_text').innerHTML = text
document.getElementById('alertBox').style.visibility = 'visible'
}
function alertBox_hide() {
document.getElementById('alertBox').style.visibility = 'hidden'
}
</script>
</head>
<body onload="alertBox('this is a test')">
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text">This is some sample text that will appear here</div>
<div id="alertBox_btn"><input type="button" value="OK"></div>
</div>
</div>
</div>
</body>
</html>