好的,所以我设计这个有音乐库的网页。 在图书馆上,它只是CD/专辑封面和它下面的播放按钮,可以让音乐在音乐播放器中播放。
我想做的是使专辑封面成为一个链接,以打开带有专辑封面和表格的模式,其中包含歌曲列表和链接选项,可以在即 Spotify APple 音乐等处流式传输专辑......
但我不想在专辑封面的页面上包含模态脚本(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>
如果你在主页上使用PHP,你可以把模态的所有html放在它自己的页面中(保存在"include"文件夹中(,然后将其包含在主页的PHP代码中。然后,您可以使用 AJAX 将正确的数据加载到模态主体中的div 中。
<?php
$cd_detailsModal = "includes/cd_detailsModal.html";
include($cd_detailsModal);
?>