styl css dla przycisku podobnego do <div> - jquery, css

Próbuję dodać w moim projekcie symulację okna podręcznego (gdzie później dodam zawartość z innych stron z mojej aplikacji). Mam następujący kod:

html

<div id="box">
<div id="title">Titulo <span id="button">X</span> </div>
<div id="text">Conteudo</div>
</div>

javascript / jquery

$("window").load(function(){
$("#box").draggable();
});

css

#box {
box-sizing: padding-box;
box-shadow: 10px 5px 5px black;
border-style: solid;
position: absolute;
width: 320px;
height: 640px;
min-width: 160px;
min-height: 500px;
max-width: 500px;
max-height: 750px;
top: 200px;
left: 200px;
}

#button {
background-color: red;
padding: 0px 0px 0px 95%;
min-width: 32px;
max-width: 5%;
position:absolute;
}

#title {
background-color: black;
text-decoration-color: white;
font: 32px/36px arial;
position: relative;
}

#text {
background-color: white;
text-decoration-color: black;
font: 24px/28px sans-serif;
position: relative;
}

Konkluzja: chcę, aby element identyfikowany przez id = button pozostawał w prawym rogu paska tytułu z mojego "okna", ale w tym bieżącym stanie, to właśnie otrzymałem:

jak mogę to poprawić, aby osiągnąć to, co chcę?

ps .: akceptuję sugestię używając jquery / jquery-ui. Próbuję wcześniej BootstrapDialog, ale nie obsługuję mojego projektu, ponieważ nie dostosowuję się do załadowanej zawartości i nie blokuję innych treści z mojej strony, kiedy jest otwarta.

Odpowiedzi:

Myślę, że mam to, czego chciałeś. Podszewka była trochę większa, więc ją usunąłem. Również jeśli chcesz go ustawić w prawo, gdy pozycja jest bezwzględna, potrzebujesz prawej: 0px; Inną rzeczą "X" nie był wyrównany centrum w div, więc dodałem text-align: center; Zmień styl #piecki na:

    #button {
background-color: red;
min-width: 32px;
max-width: 5%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}