Hey there! I'm trying to achieve a specific style using flexbox, but I'm having trouble with placing the modal close button on top of the image. If anyone has any tips or guidance, I would greatly appreciate it! Here's what I have so far: https://i.sstatic.net/Ifc8x.jpg
Below is the code snippet for the bootstrap modal dialog box that I'm working on:
<Modal show={this.props.show} onHide={() => this.props.onHide()}
>
<Modal.Body className ="modal-body">
<div className = "data-container">
<div class="callout" data-closable>
<button class="close-button" onClick={() => this.props.onHide()} aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
{this.props.data}
</div>
</Modal.Body>
</Modal>
And here is the CSS that I have been working with:
.modal-dialog {
display: flex;
max-width: 800px;
height:auto;
flex-direction:column;
justify-content: center;
padding-top:150px;
margin: auto;
}
.modal-content {
overflow: hidden;
border:none;
justify-content: center;
margin:auto;
}
.modal-body {
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
background-color:rgb(221, 221, 221);
padding: 2px;
}
.callout {
display:flex;
border: none;
display: block;
margin-left:47rem;
}
.close-button {
border: none;
background-color:rgb(221, 221, 221);
color:red;
margin:auto;
font-size:50px;
}
If anyone can provide some assistance, it would be greatly appreciated. Thank you! ✌️