ブートストラップ3リモートモーダルをパラメータ付きブートストラップ4モーダルに変換

Question

近い将来、私の店はブートストラップ4にアップグレードする予定ですが、リモートモーダルを使用して問題を解決するまではこれを行うことはできません。次にモーダルをロードする方法の例を示します。リモートモーダルを使用する理由は、modal-bodyが動的で、URLに基​​づいて異なるファイルを使用する可能性があるためです。私はjQuery("#newsModal").on("load",..)を使用していると聞いたことがありますが、どうしたらいいですか？私はthisを見つけましたが、アンカーがどのように見えるのか、リモートデータをロードするためのURLを構築する方法がわかりません。

<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> 

は、私が思うに、私は

グローバルPHPファイルを含めますthのような何かをする必要がある動的にアンカーを構築するときです：

a）のデータ-attrsにして偶然に

Bを交換してください）あなたはそれが簡単にBootbox.jsのようなものを使用して見つけるかもしれない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にを取得するためにイベントの呼び出しを使用しますブートストラップモーダルを動的に作成するために使用できます。これはresponseはHTML断片であると仮定し

$(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 
       }); 
      }); 

    }); 

}); 

で

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

：あなたが示されてきたものを考える

、それは次のように動作します。

Bootboxは正式にBootstrap 4で動作することは確認されていませんが、まだ問題はありません（modalsはBS4でマークアップを更新していない数少ないコンポーネントの1つです）。

免責事項：私は現在、Bootboxに寄稿しています（主に、ドキュメントおよびトライアルの問題をアップデートしています）。

がの場合は、ブートストラップモードのみを使用する必要があります。実際は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'); 
     }); 

    }); 

});