Come mostrare un URL nella finestra di dialogo Bootstrap Modal: Sul pulsante clic su

Question

Devo caricare una pagina (URL interno) in una finestra modale. Stavo usando window.showModalDialog (url, null, features) ma questo non funziona correttamente su Safari, Chrome. Quindi abbiamo deciso di utilizzare la finestra di dialogo modale di Bootstrap. Non sono in grado di farlo funzionare. Qualche idea su cosa potrei fare male?

//imports 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 


    //activate content as modal 
     $(document).ready(function(){ 
      $('#test_modal').modal({ 

       }); 
    } 

    ....... 
    ....... 

    $("#btnSubmit").click(function(){ 
    var url = constructRequestURL(); 
     $('#test_modal').modal(data-remote=url,data-show="true"); 
    }); 


    ----- 
    ----- 
    <div class="modal fade" id="test_modal"> 
</div> 

Answer 1

Se avete intenzione di proseguire lungo il sentiero di bootstrap, si potrebbe dare un'occhiata qui: jsfiddle - remote URI in Bootstrap 2.3.2 modal

Nota che l'URL dovrà essere nello stesso dominio (anche se lei ha detto che è " interno ") o il tuo dominio dovrà essere consentito dalle impostazioni Access-Control-Allow-Origin del sito remoto. Quindi tieni presente che la demo del fiddle non può effettivamente caricare il contenuto da example.com.

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button> 

<div id="myModal" class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> 
     <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <!-- remote content will be inserted here via jQuery load() --> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div> 

Non è necessario scrivere qualsiasi JavaScript personalizzato per questo - Bootstrap saprà cosa fare in base ai dati attributi come i dati-remote = "http://example.com/whatever" e dei dati -target = "# myModal", ecc

consultare la sezione dedicata del Bootstrap modal docs per ulteriori informazioni ...

Edit: si scopre che cambiando l'URL remoto in modo dinamico non è così facile come potrebbe essere. Si spera che this answer ti aiuteranno ulteriormente.

Answer 2

In alternativa è possibile utilizzare la scatola fantasia. È semplice e pulito.

dare uno sguardo qui: http://fancyapps.com/fancybox/3/docs/#ajax

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;"> 
AJAX content