створіть порожнє модальне поле на поточній сторінці, а нижче - виклик ajax, ви можете побачити, як отримати вміст у результаті з іншої сторінки html.
$.ajax({url: "registration.html", success: function(result){
$("#contentBody").html(result);
$("#myModal").modal('show');
}});
як тільки дзвінок буде зроблено, ви отримаєте вміст сторінки за результатом, після чого ви зможете вставити код у свій ідентифікатор вмісту модалу, використовуючи.
Ви можете зателефонувати контролеру і отримати вміст сторінки, і ви можете показати це у своєму модалі.
нижче - приклад модального способу Bootstrap 3 в тому, що ми завантажуємо вміст зі сторінки registration.html ...
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>
loadфункція була вилучена і про це йдеться у документах Boostrap: Ця опція застаріла з версії 3.3.3 і буде видалена у версії v4. Замість цього ми рекомендуємо використовувати шаблони на стороні клієнта, фреймворк прив'язки даних або самостійно викликати jQuery.load. хотів би побачити оновлену версію для цього