Question

好的，我正在设计这个有音乐库的网页。在图书馆里只有CD /专辑封面和下面的播放按钮，可以在音乐播放器中播放音乐。

我想要做的是让专辑封面打开一个带有专辑封面和表格的模式的链接，其中包含歌曲和选项的列表，以链接在哪里播放专辑，即Spotify APple音乐等....

但是我不希望在页面上包含专辑封面的Modal脚本（html代码）。只是因为它没有那么混乱并且当有人检查页面时保持编码整洁？有没有办法我可以将所有模态放在单独的html或php页面上，并使用php echo或@import来自另一个页面的模态内容。

Class（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>

Answer 1

如果您使用php作为主页面，您可以将模态的所有html放在自己的页面中（保存在＆＃34; includes＆＃34;文件夹中），然后将其包含在php代码中主页。然后，您可以使用AJAX将正确的数据加载到模态体中的div中。

<?php
 $cd_detailsModal = "includes/cd_detailsModal.html";
 include($cd_detailsModal);
?>

Bootstrap 3 Modals包含在单独的html / php文件中

1 个答案: