我有 2 个 html 文件名称 index.html，model.html。我有很多模型，想全部写在 model.html 页面中，并想在 index.html 页面中使用它。
我写我的代码如下
但是它不起作用，有人可以告诉我我的错误吗？请写整页html代码对我有很大帮助
index.html
<!DOCTYPE html>
<html>
<head>
<title>Load Modals from Another HTML File</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button to open Modal 1 -->
<button type="button" class="btn btn-info btn-lg" onclick="loadModal('modal1')">Open Modal 1</button>
<!-- Button to open Modal 2 -->
<button type="button" class="btn btn-info btn-lg" onclick="loadModal('modal2')">Open Modal 2</button>
<!-- Button to open Modal 3 -->
<button type="button" class="btn btn-info btn-lg" onclick="loadModal('modal3')">Open Modal 3</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal content will be loaded here -->
</div>
</div>
</div>
<!-- JavaScript code to load the modal content from another HTML file -->
<script>
function loadModal(modalId) {
// Load the contents of the modal from the other HTML file
$.get("model.html", function(data) {
// Extract the modal content with the given ID from the loaded HTML
var modalContent = $(data).find("#" + modalId).html();
// Set the modal content in the current page's HTML
$("#myModal .modal-content").html(modalContent);
// Open the modal
$("#myModal").modal("show");
});
}
</script>
</body>
</html>
model.html如下
<!DOCTYPE html>
<html>
<head>
<title>Model Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="model1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Model 1</h4>
</div>
<div class="modal-body">
<p>Some text in the first modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="model2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Model 2</h4>
</div>
<div class="modal-body">
<p>Some text in the second modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="model3" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Model 3</h4>
</div>
<div class="modal-body">
<p>Some text in the third modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>