modal div doesn't show when included within a php file - php

Question

when i include a agenda.php file that contains a div with bootstrap modal class inside a div in another php file, it doesn't show properly.
agenda.php
<style type="text/css">
.block a:hover{
color: silver;
}
.block a{
color: #fff;
}
.block {
position: fixed;
background: #2184cd;
padding: 20px;
z-index: 1;
top: 240px;
}
</style>
<!-- Place this tag where you want the badge to render. -->
<br /><br />
<hr />
<!--<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" >
-->
<!-- add calander in this div -->
<div class="container">
<div class="row">
<div id="calendar"></div>
</div>
</div>
<!-- Modal -->
<div id="createEventModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Event</h4>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="inputPatient">Event:</label>
<div class="field desc">
<input class="form-control" id="title" name="title" placeholder="Event" type="text" value="">
</div>
</div>
<input type="hidden" id="startTime"/>
<input type="hidden" id="endTime"/>
<div class="control-group">
<label class="control-label" for="when">When:</label>
<div class="controls controls-row" id="when" style="margin-top:5px;">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</div>
</div>
</div>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Event Details</h4>
</div>
<div id="modalBody" class="modal-body">
<h4 id="modalTitle" class="modal-title"></h4>
<div id="modalWhen" style="margin-top:5px;"></div>
</div>
<input type="hidden" id="eventID"/>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-danger" id="deleteButton">Delete</button>
</div>
</div>
</div>
</div>
<!--Modal-->
<div style='margin-left: auto;margin-right: auto;text-align: center;'>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-21769945-4', 'auto');
ga('send', 'pageview');
</script>
<div>
<h1> La fin ya scampo </h1>
</div>
</div>
index.php
...
...
<div class="tab-pane fade" id="Agenda">
<?php include("agenda.php"); ?>
</div>
...
...
i expect the code to show a calendar in a part of my index.php.
PS: when i delete the modal class from the div tag it works all fine, i know that the modal should be in the top, but aren't there any other method?

Answer 1

The PHP include file is not the problem. There is no reason why you cannot have the Bootstrap modal in a PHP include file. The include file is injected into the HTML code before the DOM is rendered, so there should be no problem.
HOWEVER... Possibly, the problem is having the Bootstrap modal dialog structure be added to the HTML inside another div -
<div class="tab-pane fade" id="Agenda">
<?php include("agenda.php"); ?>
</div>
The Bootstrap modal should be at the first level under the body tag. That is where Bootstrap expects it to be. Doing that should not be a problem, since the Bootstrap modal is invisible until displayed... Resist the temptation to add additional layers of HTML outer containers to the Bootstrap divs until you are really sure you understand Bootstrap scaffolding.
Also, having the fade tag on that same #Agenda div (the one that the modal dialog is in) might not be a good idea. Note that you do not need the modal inside the #Agenda div in order to use it for an agenda (calendar?) functionality.
I suggest that until you solve your problem, get rid of all the include files. Take the code in your PHP include files and stick it into the main body, so that you only have the one index.php file, with no includes. Once you get it working, you can then break things out into the include files. Simplify to solve.