I am attempting to add a popup window feature to my project in order to simulate a pop-up window where I can later incorporate content from other pages within my application. The code I currently have is as follows:
html
<div id="box">
<div id="title">Title <span id="button">X</span> </div>
<div id="text">Content</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;
}
In summary, I would like the element identified by id=button to be positioned in the right corner of the title bar within my "window". However, in its current state, this is what I am seeing:
https://i.sstatic.net/x7xPX.jpg
How can I improve this to achieve the desired positioning?
P.S.: I am open to suggestions using jQuery/jQuery-UI. I previously tried BootstrapDialog but found it unsuitable for my project as it does not adjust according to loaded content and blocks other content on my page when opened.