0

カスタムアラートボックスに「OK」ボタンを動的に追加したいのですが、呼び出されたときに表示されないようです。私は途方に暮れています。私が間違っていることについて確信が持てません：

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 {
    width: 100%;
    height: auto;
    text-align: center;
    margin-top:27px;`
}
#alertBox_div_btn {
    position: relative;
    height: auto;
    text-align: center;
    border: none;
    margin-top: 7px;
    visibility: hidden;
}
#button_ok {
    border: 1px solid rgb(88,88,88);
    font-family: tahoma;
    font-size: 8pt;
    height: 22px;
    width: 35px;

}
</style>

<script type="text/javascript">
//alertBox('text','ok')
function alertBox(text,x) {

    if (x == 'ok') {

    document.getElementById('alertBox_div_btn').innerHTML = '<input id="button_ok" type="button" value="OK" onclick="alertBox_hide()">'

    }
    document.getElementById('alertBox_text').innerHTML = text

    document.getElementById('alertBox').style.visibility = 'visible'

}

function alertBox_hide() {

    document.getElementById('alertBox_container').style.visibility = 'hidden'

}
</script>

</head>

<body onload="alertBox('this is a test','ok')">
<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_div_btn"></div>
        </div>
    </div>
</div>
</body>

</html>
4

1 に答える 1

2

CSS、具体的には、ボタンを含む div を に#alertBox_div_btn設定しています。visibilityhidden

于 2013-09-16T20:48:18.153 に答える