1

I need your help.

How can the HTML/CSS properties be adjusted so as to allow the OK button to appear in the center of my custom alertbox and just after the text?

I can't, for the life of me figure as to how to do this. =\

Here is what is happening: enter image description here

Here is my desired result: enter image description here

Here is the html markup:

<!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>
4

1 回答 1

0

change the class..

<style type="text/css">
#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_btn{
    position: relative;
    height: auto;
    text-align: center;
}
</style>
于 2013-09-16T20:08:19.703 回答