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>的链接而不是按钮。

更具体些； ic是我真正拥有的（正在使用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的角度来看，没有人会期望更改页面以及打开模式。在他们的方法中，也许有一些更容易，更普遍的方法。

从其他页面打开模式

2 个答案: