從其他頁面打開模式

Question

我正在尋找使用Bootstrap 4打開模態。如果我查看文檔，則工作正常。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

但實際上，我想從其他頁面調用模式。 這意味着myModal不應與按鈕位於同一頁面上。 但是我所有嘗試都失敗了。 你有什么主意嗎 ？ 謝謝

此外，我想使用帶有<a href=....></a>的鏈接代替按鈕。

更加具體; 這是我真正擁有的（在Bootstrap 2中工作，並且我嘗試使其在Bootstrap 4中工作），但是它不起作用，或者至少沒有達到預期的效果。

第1頁

<a class="btn btn-mini btn-info avia-modal" href="PAGE_MODAL_URL"></a>

js端

$(".avia-modal").click( function() {
    ouvrirModal(this);
    $("#idurl").val($(this).attr('rel'));
} );


/**
 * Fonctions popup modal
 */
function ouvrirModal(elt){
    href = $(elt).prop("href");

    $('#aviaModal').modal();

    $('#aviaModal iframe.modal-body').prop("src", href);

    $('#aviaModal iframe.modal-body').removeClass("d-none");
    $('#aviaModal div.modal-body').addClass("d-none");

}

/**
 * itialisation modal
 */
function initModal(btnSave){
    if(btnSave){
        $("#aviaModal .avia-btn-save").removeClass("d-none");
        $("#aviaModal .avia-btn-save").click( function() {
            window.frames["iframemodal"].window.saveAction();
        });
    }
}

/**
 * Réinitialisation modal
 */
function resetModal(){
    $("#aviaModal .avia-btn-save").addClass("d-none");
    $('#aviaModal').modal('d-none');
}

 $(document).ready(function(){
    parent.$("#aviaModal .modal-header h3").html("Historique");
    parent.$("#aviaModal").addClass("modal-historique");
});

Answer 1

您為什么不使用要輸出的所需頁面來內嵌彈出窗口。

Answer 2

一種方法是鏈接到在特定條件下執行javascript的頁面，從而為您打開模式。

另一種方法是使用React，Angular或Vue創建單個頁面應用程序。

但是，從UX的角度來看，沒有人期望更改頁面以及打開模式。 在他們的方法中，可能有一些更簡單，更常見的方法。