webentwicklung-frage-antwort-db.com.de

So zeigen Sie eine URL im Dialogfeld "Bootstrap Modal" an: Klicken Sie auf die Schaltfläche

Ich muss eine Seite (interne URL) in ein modales Fenster laden. Ich hatte window.showModalDialog verwendet (URL, Null, Funktionen), aber dies funktioniert nicht ordnungsgemäß in Safari, Chrome. Daher haben wir beschlossen, stattdessen den modalen Dialog von Bootstrap zu verwenden. Ich kann das nicht schaffen. Irgendwelche Ideen, was ich falsch machen könnte?

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

Wenn Sie den Bootstrap-Pfad fortsetzen möchten, können Sie hier nachsehen: jsfiddle - Remote-URI in Bootstrap 2.3.2 modal

Beachten Sie, dass sich die URL in derselben Domäne befinden muss (obwohl Sie erwähnt haben, dass sie "intern" ist) oder dass Ihre Domäne von den Access-Control-Allow-Origin-Einstellungen der Remote-Site zugelassen werden muss. Denken Sie daran, dass die Geige-Demo Inhalte von example.com nicht laden kann.

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

Sie müssen dafür kein benutzerdefiniertes JavaScript schreiben. Bootstrap weiß, was zu tun ist, basierend auf den Datenattributen wie data-remote = "http://example.com/whatever" und data-target = "# myModal". usw.

Weitere Informationen finden Sie im entsprechenden Abschnitt der Bootstrap Modal Docs .

Edit: Es stellt sich heraus, dass das dynamische Ändern der Remote-URL nicht so einfach ist, wie es sein könnte. Hoffentlich diese Antwort wird Ihnen weiterhelfen.

12
codebyren

Alternativ können Sie eine ausgefallene Box verwenden. Es ist einfach und sauber.

Schauen Sie hier: 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