如何將Bootstrap模塊組件與Phoenix集成？

Question

我並不是目前用於刪除確認的阻止瀏覽器確認對話框的粉絲，其登錄名是phoenix_html。鑑於Phoenix默認使用Bootstrap，我如何將Bootstrap modal component與Phoenix整合？

Answer 1

如果（且僅當）jQuery可用且存在合適的DOM元素時，我已將此對話委派給Bootstrap模塊組件。

1. 將此modal.js複製到您的Phoenix項目中的web/static/js文件夾中。
2. 註釋掉import "phoenix_html"行web/static/js/app.js

3. 在HTML模板中包含引導模式組件的HTML。引導程序文件建議到：

   總是嘗試把一個模式的HTML代碼中的頂級位置 您的文檔，以免影響模態的 外觀和/或功能的其它組件。

請確保您的HTML包括在頂層<div class="modal">的id="phoenix-bs-modal"，以及一個主（確認）按鈕<button class="btn-primary">存在於模態：

<div class="modal fade" id="phoenix-bs-modal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

傳入的消息通過刪除鏈接上的data-confirm屬性轉發給模態主體。

這對我獲得連貫的佈局非常有用。我正在把我的解決方案放在那裏，因爲希望它對其他人也有用。