Question

我似乎无法使用javascript来解决这个问题，我想在我的自定义警报框中动态添加“确定”按钮，但似乎在调用它时，它似乎没有出现。我迷路了。我不确定我做错了什么：

以下是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>

Answer 1

您的css，特别是#alertBox_div_btn，正在将包含该按钮的div的visibility设置为hidden。

OK按钮不会动态添加到div，即使在调用时也是如此

1 个答案: