Javascript - Load Link innerhalb von Modal von externer Quelle

Ich versuche, eine dynamische Website mit Modals zu erstellen, die Code aus einer anderen Quelle laden, in diesem Fall möchte ich, dass meine Benutzer ein Produkt aus der modalen Ansicht über einen Link und auswählen dann eine Bestätigungsschaltfläche so etwasJavascript - Load Link innerhalb von Modal von externer Quelle

Hauptseite -> button -> modales laden (modale Quelle ist externe Seite ("prods.php")) -> wählt Produkt innerhalb des modalen Knopfes aus -> modal zeigt jetzt an ("prod_detail .php ") -> bestätigen -> Daten zur Hauptseite zurück

Dies ist mein aktueller Code der Modal Loading externen Quelle, aber ich kann es nicht laden, um das neue prod_detail zu laden, weil es im Hauptfenster

öffnet

//called when user clicks login 
 
function login() { 
 
    $("#main-username").val($("#modal-username").val()); 
 
    $("#main-result").val($("#modal-result").val()); 
 
    $("#myModal").modal("hide"); 
 
} 
 

 
//called when the modal is closed, logs values grabbed from the modal in login() 
 
$('#myModal').on('hidden', function() { 
 
    console.log('username : '+$("#main-username").val()); 
 
    console.log('result : '+$("#main-result").val()); 
 
})

<!DOCTYPE html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<!-- button to trigger modal --> 
 
<a href="prods.php" data-target="#myModal" data-toggle="modal">remote modal</a> 
 

 
<!-- hidden fields to store modal result in --> 
 
<input type="text" id="main-username"> 
 
<input type="text" id="main-result"> 
 

 
<!-- modal --> 
 
<div id="myModal" class="modal hide fade" 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 test</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
 
    <button class="btn btn-primary" onclick="login();">Login</button> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 
</html>

Dank

Quelle

2016-08-11 slozano95

Sind Sie nur den HTML von einem laden versuchen, Quelle in Ihr Modal? Könnte ein iFrame den Job machen? –

Verwenden Sie einen iframe ... – webdeb

Wo ist der Code zum Laden von prod_detail.php? – Barmar

Ihr Hauptfenster:

<!-- hidden fields to store modal result in --> 
<input type="text" id="main-username"> 
<input type="text" id="main-result"> 

<script> 
window.setData = function(data) { 
    console.log('data from iframe', data); 
} 
</script> 

<!-- modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <iframe src="/prods.php"></iframe> 
</div>

... prods.php

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal test</h3> 
    </div> 
    <div class="modal-body"> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
    <button class="btn btn-primary" onclick="window.parent.setData("HI from iframe")">Say Hi to Main Window</button> 
    </div>

Quelle

2016-08-12 08:55:42 webdeb

Javascript - Load Link innerhalb von Modal von externer Quelle

Antwort

Verwandte Themen