it-swarm.com.de

Verwenden von Bootstrap 3.0-Modalen zum Laden dynamischer Remote-Inhalte innerhalb eines Iframes

Ich habe einige der hier vorgestellten Vorschläge zu anderen Fragen und zu stackexchange ausprobiert, und nichts funktioniert zu meiner Zufriedenheit. 

Ich versuche, dynamische Inhalte in eine Modalität zu laden. Insbesondere YouTube-Videos oder Soundcloud-Audio innerhalb eines iFrames. Damit kann jeder Benutzer, der die Website besucht, Links für Videos oder Audio eingeben. Der Modal lädt dann dynamisch die Verknüpfungen der Benutzer. Jeder nachfolgende Benutzer kann sich alle Links innerhalb eines Modals anzeigen lassen. (separate modale Lasten für jeden Benutzer) 

Ich kann das nicht ganz richtig machen. Ich habe eine separate HTML-Datei namens "modal.html" erstellt, um dies zu testen. Dazu gehört ein iframe mit dem richtigen YouTube/Soundcloud-Clip. 

Ich bin auch verwirrt, ob ich in meinem Tag "data-remote =" verwenden muss, oder reicht die href aus? Oder benutze ich die Datenfernsteuerung im ersten Modal. Oder beides oder entweder? Weder hat gearbeitet.

Hier ist mein Code:

<a data-toggle="modal" href="modal.html" data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-     remote="modal.html" 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-hidden="true">&times;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
23
Alex S

Warum weder data-remote noch href auf entfernten Sites wie YouTube funktionieren

Das Modal von Twitter Bootstrap verwendet AJAX, um Remote-Inhalte über data-remote/href zu laden. AJAX wird durch die gleiche Origin-Richtlinie eingeschränkt. Wenn Sie also auf eine Site mit einem anderen Ursprung wie YouTube zugreifen, tritt der folgende Fehler auf:

In der angeforderten Ressource ist kein 'Access-Control-Allow-Origin'-Header vorhanden

Also wird weder data-remote noch href tun, was Sie wollen.

JSON: Wenn Sie json-Daten erhalten, können Sie möglicherweise JSONP verwenden. Da Sie jedoch HTML und nicht JSON von Websites wie YouTube benötigen, benötigen wir einen anderen Ansatz:

Lösung mit <iFrame>

Ein <iframe> funktioniert für YouTube und viele andere entfernte Sites (auch diese Lösung funktioniert nicht für alle Sites, da manche, wie Facebook, iframes explizit blockieren, indem sie X-Frame-Optionen auf 'DENY' setzen).

Eine Möglichkeit, einen Iframe für dynamischen Inhalt zu verwenden, besteht darin,

1) Füge einen leeren iframe in den Körper deines Modals ein:

<div class="modal-body">
    <iframe frameborder="0"></iframe>
</div>

2) Füge eine Abfrage hinzu, die ausgelöst wird, wenn die modale Dialogschaltfläche angeklickt wird. Der folgende Code erwartet ein Verknüpfungsziel in einem data-src -Attribut und für die Schaltfläche eine Klasse modalButton. Und optional können Sie data-width und data-height angeben - andernfalls sind sie standardmäßig auf 400 bzw. 300 eingestellt (natürlich können Sie diese problemlos ändern).

Die Attribute werden dann auf den <iframe> gesetzt, wodurch der iframe die angegebene Seite lädt.

$('a.modalButton').on('click', function(e) {
    var src = $(this).attr('data-src');
    var height = $(this).attr('data-height') || 300;
    var width = $(this).attr('data-width') || 400;

    $("#myModal iframe").attr({'src':src,
                               'height': height,
                               'width': width});
});

3) Fügen Sie die Klasse und die Attribute zum Ankertag des modalen Dialogfelds hinzu:

<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>

Demo Fiddle using youtube

36
KayakDave

wenn Sie eine vorformatierte Webseite anzeigen möchten, benötigen Sie so etwas

$('#btn').click(function() {
    $.ajax({
        url: 'url-src/dialog.html',
        dataType: 'json',
        type: 'POST',
        success: function(data) {
            if (data.check) {
                var $modal = $(data.dialog);
                $('body').append($modal);
                $modal.filter('.modal').modal();
            } else {
                alert(data.dialog);
            }

        }
    });

});

html der dialog.html

<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-hidden="true">×</button>
            <h3>Dialog</h3>
        </div>
        <div class="modal-body">
            <form role="form"  class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="mutual">Example: </label>
                    <div class="col-sm-6">
                        <input type="text" id="example-form" value="" class="form-control">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button id="edit-form"  data-id-mutual="" class="btn btn-primary">Save</button>
            <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

diese HTML-Datei hat ein Formularbeispiel. Sie müssen eine HTML-Datei mit Video hinzufügen.

12
Figa17

Wahrscheinlich ein alter Beitrag, ich hatte vor einiger Zeit ein ähnliches Problem. Ich wollte einen Link drücken, der die Href einer Textdatei (oder einer beliebigen anderen Datei) an ein Iframe innerhalb eines modalen Fensters übergeben würde.

function loadiframe(htmlHref) //load iframe
{
document.getElementById('targetiframe').src = htmlHref;
}


function unloadiframe() //just for the kicks of it
{
var frame = document.getElementById("targetiframe"),
frameHTML = frame.contentDocument || frame.contentWindow.document;
frameHTML.removeChild(frameDoc.documentElement);	
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<a class=" btn btn-danger" onClick="loadiframe('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css')" data-toggle="modal" data-target="#myModal">LINK</a><!--link to iframe-->




<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" style="border:hidden">
        <button type="button" class="close" onClick="unloadiframe()" data-dismiss="modal" aria-label="Close"><span aria-   hidden="true">&times;</span></button>
      </div>
      
      <div class="modal-body" style="padding-top:10px; padding-left:5px; padding-right:0px; padding-bottom:0px;">
        
      <iframe src="" frameborder="0" id="targetiframe" style=" height:500px; width:100%;" name="targetframe" allowtransparency="true"></iframe> <!-- target iframe -->
        
      </div> <!--modal-body-->
      
      <div class="modal-footer" style="margin-top:0px;">
        <button type="button" class="btn btn-default pull-right" data-dismiss="modal" onClick="unloadiframe()">close</button>
      </div>
      
    </div>
  </div>
</div>

In diesem Fall haben Sie also nur einen Modal, einen Iframe, den Sie laden und entladen.

2
Sachi Cortes

sie können diesen Bootstrap-Helfer für Dialoge versuchen

es unterstützt ajax request, iframes, allgemeine Dialoge, Confirm und Prompt!

sie können es verwenden als:

eModal.iframe('http://someUrl.com', 'This is a tile for iframe', callbackIfNeeded);

eModal.alert('The message', 'This title');

eModal.ajax('/mypage.html', 'This is a ajax', callbackIfNeeded);

eModal.confirm('the question', 'The title', theMandatoryCallback);

eModal.Prompt('Form question', 'This is a ajax', theMandatoryCallback);

dadurch wird beim Laden des iframe ein Ladevorgang gewährleistet!

Keine HTML erforderlich.

Sie können ein Objektliteral als Parameter für zusätzliche Optionen verwenden.

Überprüfen Sie das Site-Formular mehr Details.

beste,

1
Samuel Pinto
function javascript_function(item_code)
{
var d = new Date();
var url_to_zoom='http://localhost.com/application/page.php?id=2&item_code='+item_code+'&reqdate='+d.getTime();

$('#modal_box').modal({keyboard:true,backdrop:true,show:true,remote:url_to_zoom});
}
0
Sunit