Bootstrap 3 Modals Included via seperate html/php file - php

Question

Ok so Im designing this webpage that has a music library. on the library its just the cd/album cover and a play button under it to get the music to play in the music player.
What I want to do is make the album cover a link to open a modal with the album covers and table with the list of the songs and options to links where to stream the albums at ie Spotify APple music etc....
But I do not want to include the Modal script(html codes) on the page with the album covers.Just so its not so cluttered and to keep the coding neat when someone inspects the page? Is there a way I can put all the modal's on a seperate html or php page and use php echo or #import the modals contents from another page.
The Class (Ajax pop up links)is the modal, but it just loads html pages... can i make one page with all the modals on it and include or import or echo the file so the modal will still open without the html for the bootstrap modal having to be on the same page?
<div class="container-fluid">
<hr><div class="innerMenu container col-xs-6 col-sm-6 col-md-6" style="background-color: DarkGrey; border-radius:15px; padding:2px; opacity:1.0;">
<b><a id="all" href="#"><button type="button" class="blk button">All</button></a>
<a id="mixtapes" href="#"><button type="button" class="blk button">Mixtapes</button></a>
<a id="albums" href="#"><button type="button" class="blk button">Albums</button></a>
<a id="singles" href="#"><button type="button" class="blk button">Singles</button></a></div><div class="container col-xs-6 col-sm-6 col-md-6">
<h4><b><font size="+4" color="orange" >Music Library</font></b></h4></div>
<br><br>
<div class="container-fluid">
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>

Answer 1

if you are using php for the main page, you can put all the html for the modal in its own page (saved in the "includes" folder) and then include it in the php code on the main page. You could then use AJAX to load the correct data into a div in the modal body.
<?php
$cd_detailsModal = "includes/cd_detailsModal.html";
include($cd_detailsModal);
?>