2
好吧，所以我设计这个网页，有一个音乐库。在图书馆它只是CD /专辑封面和下面的播放按钮，让音乐播放音乐播放器。引导3手机通过单独的HTML/PHP文件包括
我想要做的是让专辑封面打开一个链接，打开一个模式与专辑封面和表与歌曲列表和选项链接在哪里流媒体专辑在Spotify APple音乐等...
但是我不想在包含专辑封面的页面中包含Modal脚本（html代码）。只有当它检查页面时它不那么混乱并且保持编码整洁？有没有一种方法可以将所有的模态放在单独的html或php页面上，并使用php echo或@import从另一页面输入模态内容。
该类（Ajax弹出链接）是模式，但它只是加载html页面...我可以制作一个页面上的所有模态，并包含或导入或回显文件，使模态仍然打开没有html引导模式必须在同一页面上？
<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" >
<a href="pages/DoinNumbers.html" class="ajax-popup-link"><img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px"></a>
</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" >
<a href="pages/promo.html" class="ajax-popup-link"><img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px"></a>
</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" >
<a href="pages/promo.html" class="ajax-popup-link"><img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px"></a>
</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" >
<a href="pages/promo.html" class="ajax-popup-link"><img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px"></a>
</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" >
<a href="pages/promo.html" class="ajax-popup-link"><img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px"></a>
</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" >
<a href="pages/promo.html" class="ajax-popup-link"><img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px"></a>
</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" >
<a href="pages/promo.html" class="ajax-popup-link"><img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px"></a>
</div>
</div>