Преобразование 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> 

Я думаю, что нужно сделать что-то вроде это при создании якоря динамически:

а) Заменить paramters с данными-ATTRS

б) использовать заклинатель событий для получения данных-AttrS с помощью 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

Вы можете найти его проще использовать что-то вроде 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 (главным образом, обновляя документы и проблемы с triaging).

Если вы должны использовать только Bootstrap modal, вы на самом деле после 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'); 
     }); 

    }); 

});