[英]How do I load bootstrap modal content dynamically from a different html file using java script?
我想通過單擊按鈕動態加載位於另一個 html 文件 (record.html) 中的引導程序 model 內容。 請幫我解決問題。 我已經提到了類似的問題並嘗試了不同的選項,但仍然無法正常工作。 請幫忙。
作為參考,請在下面找到我的代碼:
測試2.html
<!DOCTYPE html>
<html lang="english">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing2</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href='style.css'>
</head>
<body>
<button type="button" class="btn-modal" href="record.html" id="buttonCustom">
launch modal
</button>
<div class="modal fade" id="recordContent">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$("#buttonCustom").click(function(){
$('#recordContent').modal('show').find('.modal-content').load($(this).attr('href'));
});
</script>
<script>
$(document).on("click","#closeButton",function(){
$('#recordContent').modal('hide');
});
</script>
</body>
</html>
記錄.html
<div class="modal-header">
<h4 class="modal-title">Modal with Dynamic Content</h4>
<button type="button" class="close" data-dismiss="modal"></button>
</div>
<div class="modal-body">
hello this is modal content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
</div>
這是你的做法
/*This goes into your HTML page body*/
<div class="modal fade mt-5" role="dialog">
<div class="modal-dialog modal-lg" id="modalID"></div>
</div>
/*This goes in your script tag*/
<script type="text/javascript">
$(document).ready(function() {
// Page Modals
$("#modalID").load("/path/to/your/file", function() {});
/*empty callback but if you want you can do stuff here */
});
</script>
yourModal.html
<div class="modal-content">
<div class="modal-header bg-white justify-content-center">
<h5 class="modal-title font-weight-bold ml-auto">MOdal Title</h5>
<button type="button" class="close text-elegant" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body bg-white">
/* Your modal dialoge body goes in here
*/
</div>
</div>
為此,您需要 jquery 3.3 或更高版本
您可以使用以下代碼:
$(document).ready(function () {
$(function () {
$("#buttonCustom").on('click', function (e) {
var url = $(this).attr('href');
$(".modal-content").html('<object data="' + url + '"/>');
$('#recordContent').modal('show');
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.