2013-09-16 2 views
1

Мне нужна ваша помощь.Выравнивание кнопки в центре после текста внутри пользовательского окна оповещения

Как можно настроить свойства HTML/CSS, чтобы кнопка ОК отображалась в центре моего пользовательского окна оповещения и сразу после текста?

Я не могу, поскольку жизнь меня фигурирует в том, как это сделать. = \

Вот что происходит: enter image description here

Вот мой желаемый результат: enter image description here

Вот 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> 

ответ

0

изменить класс ..

<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> 
Смежные вопросы