Utilizing Bootstrap Modal for quick news pop-ups has been a challenge.
Currently, the issue is that when clicking on a link, it only displays a small box instead of fullscreen.
My question simply put: Is there a way to append the width and height properties of the class containing modal directly to the body element in order to display in fullscreen?
I suspect this is due to the modal being a child of another parent element, preventing it from displaying in fullscreen mode.
Is there a method to make a div's class appear fullscreen without relying on any parent elements?
The structure of my code looks like this:
.contentfit {
height: 100%;
position: relative;
}
.right-content {
background-color: #5AA258;
float: left;
width: 70%;
height: 100%;
padding-left: 30px !important;
padding-right: 30px !important;
display: flex;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="section">
<div class="contentfit">
<div class="right-content">
<section id="hoicho">
<div class="title">
<h2>The title</h2>
</div>
<div class="services">
<ul>
<li>Services 1</li>
<li>Services 2</li>
</ul>
</div>
<div class="wrap">
<div class="frameallcontent">
<div class="containter">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<p class="title-p"> <a href="javascript:void(0,0)" data-toggle="modal" data-target="#tintuchoicho">Click to link</a>
</p>
<!-- Modal -->
<div class="modal fullscreen-modal fade" id="tintuchoicho" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="left-content">
</div>
</div>
</div>This excerpt showcases only a portion of my code.
To see how my example actually appears, refer to this image: https://i.sstatic.net/LrZ8T.png
Upon clicking the underline link, a small popup window is displayed.