Bootstrap 4 con telecomando Modale

Non posso fare Modale lavorare in modalità remota con il nuovo Twitter Bootstrap versione : Bootstrap 4 alpha. Funziona perfettamente con Bootstrap 3. Con bootstrap 4 io sono sempre la finestra di popup, ma il modello di corpo non è caricato. Non c’è la remota chiamata viene effettuata per myRemoteURL.do a carico del corpo del modello.

Codice:

<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>

<!-- Model -->
<div class="modal fade" id="myModel" tabindex="-1"
    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" id="myModalLabel">Model Title</h3>
            </div>
            <div class="modal-body">
                <p>
                    <img alt="loading" src="resources/img/ajax-loader.gif">
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>
InformationsquelleAutor Zeeshan | 2016-01-13



6 Replies
  1. 53

    Trovato il problema: Hanno rimosso l’opzione remote nel bootstrap 4

    remoto : Questa opzione è sconsigliata a partire da v3.3.0 e saranno rimossi in v4. Si consiglia invece l’uso di client-side di template o di un’associazione di dati quadro, o la chiamata jQuery.carico di se stessi.

    Ho utilizzato JQuery per implementare questo rimosso funzione.

    $('body').on('click', '[data-toggle="modal"]', function(){
            $($(this).data("target")+' .modal-body').load($(this).data("remote"));
        });  
    • Con voto positivo. Funziona, solo per chiarire, di caricare dati da remoto=”your_own_url” e posizionarlo su “modal-corpo” dei dati target=”#myModel”, potrebbe essere necessario modificare il modello “a corpo” a cui anche il luogo che si desidera inserire i dati, ad esempio “modal-content”
    • Nel mio caso, ho usato .load($(this).attr('href')).
    • per me dato che ho avuto più modali ho usato $('body').on('click.modal.data-api', '[data-toggle="modal"]', function(){ $($(this).data("target")+' .modal-content').load($(this).attr('href')); });
    • la risposta migliore
  2. 24

    Secondo la documentazione ufficiale, siamo in grado di fare il follow(https://getbootstrap.com/docs/4.1/components/modal):

    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) //Button that triggered the modal
        var recipient = button.data('whatever') //Extract info from data-* attributes
        //If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        //Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('New message to ' + recipient)
        modal.find('.modal-body input').val(recipient)
    })

    Così, credo che questo sia l’approccio migliore:

    $('#modal_frame').on('show.bs.modal', function (e) {
        $(this).find('.modal-content').load(e.relatedTarget.href);
    });

    Si adattano alle tue esigenze

    • funziona come un fascino, potrebbe dare +10 😉
    • Come ottenere i dati personalizzati-attributo (dati (“tutto ciò -)) se non è un pulsante, ma il tag di ancoraggio ? Ho $(event.relatedTarget).data('whatever') indefinito.
    • Questo ha funzionato per me: $(event.relatedTarget).attr('data-whatever')
  3. 2

    Come alcune delle altre risposte e Bootstrap docs indicare, Bootstrap 4 richiede la gestione del show.bs.modal evento per caricare il contenuto in modale. Questo può essere utilizzato per caricare il contenuto di una stringa HTML, o da un url remoto. Ecco una esempio

    $('#theModal').on('show.bs.modal', function (e) {
    
        var button = $(e.relatedTarget);
        var modal = $(this);
    
        //load content from HTML string
        //modal.find('.modal-body').html("Nice modal body baby...");
    
        //or, load content from value of data-remote url
        modal.find('.modal-body').load(button.data("remote"));
    
    });

    Bootstrap 4 Remote URL Demo


    Un’altra opzione è quella di aprire il modale dati una volta che viene restituito da una chiamata Ajax…

      $.ajax({
           url: "http://someapiurl",
           dataType: 'json',
           success: function(res) {
    
               //get the ajax response data
               var data = res.body;
               //update modal content
               $('.modal-body').text(data.someval);
               //show modal
               $('#myModal').modal('show');
    
           },
           error:function(request, status, error) {
               console.log("ajax call went wrong:" + request.responseText);
           }
      });

    Bootstrap 4 Carico Modale dall’Ajax Demo

  4. 1

    In Asp.NET MVC, questo funziona per me

    html

    <a href="#" onclick="Edit(1)">Edit item</a>
    <div class="modal" id="modalPartialView" />

    jquery

    <script type="text/javascript">
            function Edit(id)
            {
                $.ajax({
                    url: "@Url.Action("ActionName","ControllerName")",
                    type: 'GET',
                    cache: false,
                    data: {id: id},
                }).done(function(result){
                    $('#modalPartialView').html(result)
                    $('#modalPartialView').modal('show') //part of bootstrap.min.js
                });
            }
    <script>

    Azione

    public PartialViewResult ActionName(int id)
    {
       //var model = ...
       return PartialView("_Modal", model);
    }
  5. 0

    Se si utilizza Jquery, versione slim (come in tutti i Bootstrap 4 documenti ed esempi), la funzione di carico non riuscirà

    È necessario utilizzare la versione completa di Jquery

  6. -3

    Questo processo di caricamento attuale e dinamico. dati remota = “remoteContent.html”

    <!-- Link trigger modal -->
    <a href="javascript:void(0);" data-remote="remoteContent.html" data-toggle="modal" data-target="#myModal" data-remote="true" class="btn btn-default">
        Launch Modal
    </a>
    This trick :  data-remote="remoteContent.html"
    <!-- Default bootstrap modal example -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    • come potete vedere, ci sono due dati-codici remoti. uno dei dati da remoto=”remoteContent.html” e gli altri dati da remoto=”true”.
    • Non funziona per Bootstrap4, remoto l’opzione è stata rimossa. Come si è accennato in @Zeeshan l’esempio.

Lascia un commento