How to open a Bootstrap modal in a leaflet full screen map?

You can play on the map bellow, enabling or disabling the full screen mode. Please click on the marker or on the top right link to open the modal

With Bootstrap 3, Leaflet and Leaflet.fullscreen, in order to open a modal inside the fullscreen, insert the modal div inside the map div:

<div id = "map" class = "map">
	<!-- modal -->
	<div id="modal" class="modal fade" data-backdrop="false">
		<div class="modal-dialog">
			<div class="modal-content" style="padding: 10px;padding: 10px;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h3 style="margin-bottom: 40px;">How to open a Bootstrap modal also in Leaflet fullscreen</h3>
				</div>
				<div class="modal-body">		
					<div id="contenu">PUT HERE WHAT YOU WANT: STATICALLY OR DYNAMICALLY
					With the argument data-backdrop="false" the close button is necessary.
					</div>
				</div>
				<div class="modal-footer" style="margin-top: 0px;">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /modal -->
</div>

Or include the modal with a PHP call:

<div id = "map" class = "map">
<!-- modal -->
<? php 
include ("include/modal/mymodal.php"); 
?>
<!-- /modal -->
</div>

Adding the link to open the modal, the link can be in a Leaflet popup or in a leaflet-control-container inside the map:

<a href="#" class="mymodal" id="748">Click to open modal</a>

Adding the jQuery delegate code to open the modal:

<script type="text/javascript">
$('body').on('click','a.mymodal',function(oEvt){
		oEvt.preventDefault();
		identif = $(this).attr("id");
		$("#modal").modal();
		$("#contenu").fadeIn(1000).html('<img src="./cache/images/thumb/thumb_rando_'+identif+'.jpeg"><br>• The content can be created dynamically<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed  eiusmod tempor incididunt ut labore et dolore magna aliqua.Amet justo donec enim diam vulputate ut pharetra. Scelerisque purus semper eget duis at. ');	
		$(".navbar-static-top").css("z-index", "200");//this is only for the website's framework
	});
</script>
  • Please, rate this tuto.