使用 JavaScript/jQuery 從外部加載 Bootstrap 4 模式的內容

Question

我是編碼初學者，我有一個使用 Bootstrap 4 模式的項目。 目前，內容位於 HTML 頁面內，我希望從外部 HTML 文件生成內容。 這可能嗎？

為了進一步澄清，我想要的是把模態的 HTML 代碼放在一個單獨的 HTML 文件中，並在需要時使用 jQuery/JavaScript 從那里加載模態內容，而不是把它放在我的索引文件中。

我目前使用此代碼來制作模態。

 if(status){
        $('#mMessage').modal()
    }

和 HTML

 <div class="modal fade" id="mMessage" tabindex="-1" role="dialog" aria-labelledby="mMessageLabel"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="mMessageLabel">Requirements Not Met</h4> </div> <div class="modal-body">Please select atleast one.</div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div>

您能提供的任何幫助將不勝感激。 謝謝。

Answer 1

請查看 JQuery加載方法。

function myfunction() {
    if(status){
        $('#mMessage').load('./another_page.html');
        $('#mMessage').modal("show");
    }
}

具有 mMessage id 的 Div 必須在當前頁面中。 里面的內容將從不同的頁面加載。

如何處理失敗的響應以及如何傳遞參數在上面附加的 JQuery 文檔中進行了說明。

Answer 2

$('#mMessage').modal("show")

我認為這可能會對您有所幫助