web-dev-qa-db-fra.com

Comment afficher une URL dans la boîte de dialogue Bootstrap Modal: Cliquez sur le bouton

Je dois charger une page (URL interne) dans une fenêtre modale. J'avais utilisé window.showModalDialog (url, null, features) mais cela ne fonctionnait pas correctement sur Safari, Chrome. Nous avons donc décidé d'utiliser la boîte de dialogue modale de Bootstrap. Je suis incapable de faire ce travail. Des idées que je pourrais faire mal?

    //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>
jqueryjsptwitter-bootstrapmodal-dialog
7
agentx

Si vous voulez continuer sur le chemin d’amorçage, vous pouvez jeter un coup d’œil ici: jsfiddle - URI distant dans le modal Bootstrap 2.3.2

Notez que l'URL devra se trouver sur le même domaine (bien que vous ayez mentionné qu'il s'agit d'un domaine "interne") ou que votre domaine devra être autorisé par les paramètres du contrôle d'accès du site distant. Alors gardez à l'esprit que la démo de violon ne peut pas charger le contenu de 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>

Vous n'avez pas besoin d'écrire de code JavaScript personnalisé pour cela - Bootstrap saura comment réagir en fonction d'attributs de données tels que data-remote = "http://example.com/wwhat" et data-target = "# myModal". etc.

Consultez la section correspondante de la documentation modale Bootstrap pour plus d'informations ...

Edit: Il s'avère que changer dynamiquement l'URL distante n'est pas aussi facile qu'il pourrait l'être. Espérons que cette réponse vous aidera davantage.

12
codebyren

Sinon, vous pouvez utiliser une boîte de fantaisie. C'est simple et propre.

Jetez un oeil ici: 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

0
Ram Pratap