Erstellen Sie ein leeres modales Feld auf der aktuellen Seite. Unten sehen Sie den Ajax-Aufruf, mit dem Sie sehen können, wie Sie den Inhalt des Ergebnisses von einer anderen HTML-Seite abrufen.
$.ajax({url: "registration.html", success: function(result){
$("#contentBody").html(result);
$("#myModal").modal('show');
}});
Sobald der Aufruf abgeschlossen ist, erhalten Sie den Inhalt der Seite anhand des Ergebnisses. Anschließend können Sie den Code mit in die Inhalts-ID Ihres Modals einfügen.
Sie können den Controller anrufen und den Seiteninhalt abrufen und dies in Ihrem Modal anzeigen.
Im Folgenden finden Sie ein Beispiel für das Bootstrap 3-Modal, bei dem Inhalte von der Seite register.html geladen werden ...
index.html
------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function loadme(){
$.ajax({url: "registration.html", success: function(result){
$("#contentBody").html(result);
$("#myModal").modal('show');
}});
}
</script>
</head>
<body>
<button type="button" class="btn btn-info btn-lg" onclick="loadme()">Load me</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="contentBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
registration.html
--------------------
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {
border: 3px solid #f1f1f1;
font-family: Arial;
}
.container {
padding: 20px;
background-color: #f1f1f1;
width: 560px;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
</style>
<body>
<h2>CSS Newsletter</h2>
<form action="/action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
</label>
</div>
<div class="container">
<input type="submit" value="Subscribe">
</div>
</form>
</body>
</html>
loadFunktion deaktiviert und in den Boostrap-Dokumenten wie folgt angegeben: Diese Option ist seit Version 3.3.0 veraltet und wird in Version 4 entfernt. Wir empfehlen, stattdessen clientseitiges Templating oder ein Datenbindungsframework zu verwenden oder jQuery.load selbst aufzurufen. würde gerne eine aktualisierte Version dafür sehen