將Bootstrap 3遠程模式轉換爲Bootstrap 4模式帶參數

Question

因此，在不久的將來，我的商店將升級到Bootstrap 4，但在使用遠程模式解決問題之前，我們無法做到這一點。這裏是我們如何加載我們的模態的例子。我們使用遠程模式的原因是因爲modal-body是動態的，可能會根據url使用不同的文件。我聽說使用jQuery("#newsModal").on("load",..)是一種選擇，但我怎麼能做到這一點？我發現this，但我不確定我的錨是如何看起來以及如何構建url來加載遠程數據。

全球PHP包括文件：

<div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data- 
ajaxload="true" aria-labelledby="newsLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h3 class="newsLabel"></h3> 
       </div> 
       <div class="noscroll-modal-body"> 
         <div class="loading"> 
          <span class="caption">Loading...</span> 
          <img src="/images/loading.gif" alt="loading"> 
        </div> 
       </div> 
       <div class="modal-footer caption"> 
        <button class="btn btn-right default modal-close" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 

modal_news.php文件：

 <form id="newsForm"> 
     <div id="hth_err_msg" class="alert alert-danger display-hide col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       You have some errors. Please check below. 
     </div> 
     <div id="hth_ok_msg" class="alert alert-success display-hide col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      &#10004;&nbsp;Ready 
     </div>      
      <!-- details //--> 
     </form> 

下面是我們如何觸發情態動詞：

<a href="#newsModal" id="modal_sbmt" data-toggle="modal" data-target="#newsModal" 
    onclick="remote='modal_news.php?USER=yardpenalty&PKEY=54&FUNCTION=*GENERAL'; remote_target='#NewsModal .noscroll-modal-body'"> 
    <span class="label label-icon label-info"> 
     <i class="fa fa-bullhorn"></i> 
    </span> 
    Promotional Ordering 
    </a> 

我想我需要做類似th的事情動態建築是當主播：

a）更換與數據ATTRS

b）利用事件的調用者使用event.target.id

Answer 1

感謝Tieson T.和this後我能夠使用這種技術，除非你有多個模態

參數有效地傳遞給遠程模式

我也包括一些有用這個例子中的技術就是如何將參數傳遞給遠程模式。

bootstrap_modal4。PHP：

<div class="portlet-body"> 
    <a href="#attendee" id="add-attendee" data-atnid="add" data-fscode="S" role="button" class="btn btn-success atn show-modal" data-toggle="modal" data-target="#attendee" data-remote="/modal_attendeesave.php?USERNAME=BRIAN">Add Attendee&nbsp;<i class="fa fa-plus"></i></a> 
    </div> 

<!-- BEGIN Food Show Attendee Add/Edit/Delete Modal --> 
<div id="attendee" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="atnLabel" aria-hidden="true"> 
    <form id="signupForm" method="post"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <label id="atnLabel" class="h3"></label><br> 
       <label id="evtLabel" class="h6"></label> 
      </div> 
      <div class="modal-body"> 
      <div class="loading"><span class="caption">Loading...</span><img src="/images/loading.gif" alt="loading"></div> 
      </div> 
      <div class="modal-footer"> 
      <span class="caption"> 
       <button type="button" id="add_btn" class="btn btn-success add-attendee hidden">Add Attendee&nbsp;<i class="fa fa-plus"></i></button> 
       <button type="button" id="edit_btn" class="btn btn-info edit-attendee hidden">Update Attendee&nbsp;<i class="fa fa-save"></i></button> 
       <button type="button" id="del_btn" class="btn btn-danger edit-attendee hidden">Delete Attendee&nbsp;<i class="fa fa-minus"></i></button> 
       <button class="btn default modal-close" data-dismiss="modal" aria-hidden="true">Cancel</button> 
      </span> 
      </div> 
     </div> 
     </div> 
    </form> 
</div> 

    <script> 
    jQuery(document).ready(function() { 
     EventHandlers(); 
    }); 
     function EventHandlers(){ 
      $('#attendee').on('show.bs.modal', function (e) { 
       e.stopImmediatePropagation(); 

       if($(this).attr('id') === "attendee"){ 

       // Determines modal's data display based on its data-attr 
       var $invoker = $(e.relatedTarget); 
       var fscode = $invoker.attr('data-fscode'); 
       console.log(fscode); 
        // Add Attendee 
        if($invoker.attr('data-atnid') === "add"){ 
         $("#atnLabel").text("Add New Attendee"); 
         $(".add-attendee").removeClass("hidden"); 
        } 
        else{ //edit/delete attendee 
        $("#atnLabel").text("Attendee Maintenance"); 
        $(".edit-attendee").removeClass("hidden"); 
        } 

        //insert hidden inputs 
        //add input values for post 
        var hiddenInput = '<INPUT TYPE=HIDDEN NAME=FSCODE VALUE="' + fscode + '"/>'; 
        $("#signupForm").append(hiddenInput); 
       } 
      }); 

       $('#attendee').on('hidden.bs.modal', function (e) { 
        $(".edit-attendee").addClass("hidden"); 
        $(".add-attendee").addClass("hidden"); 
        $("#signupForm input[type='hidden']").remove(); 
       }); 

       // BOOTSTRAP 4 REMOTE MODAL ALTERNATIVE FOR BOOTSTRAP 3v- 
       $('#add-attendee').on('click', function(e){ 
        $($(this).data("target")+' .modal-body').load($(this).data("remote")); 
        $("#attendee").modal('show');  
       }); 

     } 

    </script> 

bootstrap_remote_modal4.php：

<form id="signupForm"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
Hello World! 
</div> 
</form> 
<script> 
    $(document).ready(function(){ 
    console.log('<?php echo $_GET["USERNAME"]?>'); //passed through url 
    }); 
</script> 

注：我的show.bs.modal事件，我有一個全球show.bs.modal被傳播到這個過程中具有事件傳播的問題事件處理程序由於多個模式，所以如果您有多個模塊，請務必正確處理它們。

下面是清晰顯示傳播發生的結果的屏幕快照，但參數傳遞技術正在工作。

Answer 2

來獲取數據，ATTRS paramters你可能會發現它更容易使用類似Bootbox.js ，可用於動態創建Bootstrap模態。

鑑於你已經證明什麼，它的工作是這樣的：

<a href="/path/to/your/service" class="show-modal">trigger modal</a> 

與

$(function(){ 

    $('.show-modal').on('click', function(e){ 

     e.preventDefault(); 

     var url = $(this).attr('href'); 

     $.get(url) 
      .done(function(response, status, jqxhr) { 

       bootbox.dialog({ 
        title: 'Your Title Here', 
        message: response 
       }); 
      }); 

    }); 

}); 

這是假設response是一個HTML片段。

Bootbox還沒有正式確認可以使用Bootstrap 4，但我還沒遇到任何問題（模態似乎是BS4中沒有更新標記的少數組件之一）。

免責聲明：我目前是Bootbox的貢獻者（主要是更新文檔和分類問題）。

如果你必須只使用Bootstrap模式，你實際上是在load()之後。你可能會做這樣的事情：

$(function(){ 

    $('.show-modal').on('click', function(e){ 

     e.preventDefault(); 

     var url = $(this).attr('href'); 
     var dialog = $('#NewsModal').clone(); 

     dialog.load(url, function(){ 
      dialog.modal('show'); 
     }); 

    }); 

});