Twitter Bootstrap modale externe URLs funktionieren nicht

Twitter Bootstrap modal lädt keine externen URLs in Modal.Twitter Bootstrap modale externe URLs funktionieren nicht

Beispielcode: jsFiddle

<a data-toggle="modal" class="btn" href="http://stackoverflow.com" data-target="#myModal">click me</a> 
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <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"> 
    </div> 
</div>

Quelle

2012-08-28 Naveen

Das funktioniert nicht, weil Sie die gleiche origin policy restriction verletzen, die Sie senden Cross-Domain-AJAX-Anforderungen verhindert das ist, was Bootstrap hier verwendet. So eine Möglichkeit ist, den fremden Inhalt in eine zu laden:

$('a.btn').on('click', function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    $('.modal-body').html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>'); 
});

gewarnt aber, dass einige Websites (wie Google, Stackoverflow, Facebook, ...) kann nicht in einem Iframe geladen werden. Sie setzen den HTTP-Header X-Frame-Options auf SAMEORIGIN und überprüfen, ob sie in einem iframe geladen sind.

Sie es in Aktion in dieser Geige sehen: http://jsfiddle.net/f2Fcd/

Quelle

2012-08-28 06:19:10

Vielen Dank für die Antwort. Ich benutze externe URL, um dieses Problem zu überprüfen, ist js Geige. Ich möchte meine interne asp.net mvc-Ansicht laden, um das Modell zu laden. Das funktioniert nicht für mich. Für die Zwecke des Beispiels i helloworld.html verwenden http://jsfiddle.net/kV8hB/3/ Danke, Naveen – Naveen

Wenn Sie Ihre interne ASP.NET MVC-Ansicht laden möchten, dann müssen Sie nicht über ein iframe . Stellen Sie nur sicher, dass die URL korrekt ist. Was passiert beispielsweise, wenn Sie die URL, die sich in der 'href' befindet, direkt in die Adresszeile Ihres Browsers eingeben? Funktioniert es? –

Vielen Dank für Ihre Hilfe. – Naveen

Try this:

<script type="text/javascript" charset="utf-8"> 
$(function() { 
$('*[data-modal]').click(function(e) { 
e.preventDefault(); 
var href = $(e.target).attr('href'); 
    if (href.indexOf('#') == 0) { 
    $(href).modal('show'); 
    } else { 
    $.get(href, function(data) { 
    $('<div class="modal">' + data + '</div>').modal('show').appendTo('body'); 
         }); 
        } 
       }); 
      }); 
     </script>

Quelle

2012-08-30 12:20:02 DamienB4T

Dieser Code-Schnipsel hilft den modalen Inhalt über Ajax in Holen:

$.get(href, function(response) { 
    $("#myModal .modal-content").html(response); 
});

Beachten , dass das HTML response abgerufen, muss die Dom-Elemente enthalten normalerweise in der "modal-content" -Element enthalten:

<div class="modal-header">HEADER</div> 
<div class="modal-body">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">Do It</button> 
</div>

Quelle

2014-04-04 11:13:17

Twitter Bootstrap modale externe URLs funktionieren nicht

Antwort

Verwandte Themen