我试图从另一个HTML文件加载内容模态，并使用这两个类似的问题作为参考:从另一个HTML文件获取引导模态内容
从另一个页面获取Bootstrap's模态内容
在我的情况下，模态是在home.html和我想加载另一个文件contact.html作为内容到模态
我的代码:home。
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand" href="#">Land Power</span>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only"></span></a>
</li>
</ul>
</div>
<div class="d-flex justify-content-end">
<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" href="contact.html"data-toggle="modal" data-target="#theModal">Sign Up</button>
</div>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
</div>
</div>
</div>
Contact.html
<div class="container mt-5">
<form action="email.php" method="post" target="iframe">
<div class="form-group">
<label for="nameInput1">Name</label>
<input type="text" name="name" class="form-control" id="nameInput1" aria-describedby="nameHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="emailInput1">Email</label>
<input type="text" name="email" class="form-control" id="emailInput1" placeholder="Enter Email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<iframe name="iframe" frameBorder="0" class="d-block mx-auto alert" role="alert"></iframe>
然而，我有一个类似的问题，在第一篇文章中提到的，我的模态是加载什么，只是一个薄的白色条(空模态)。我已经将XAMPP作为本地主机的服务器运行，并且在控制台中没有看到任何错误/警告。此外，这个解决方案适用于BootStrap 3，文档说远程href现在贬值了。
因此，如果我遵循第二个帖子(第二个解决方案是为BS4更新的)，然而，并尝试添加这些脚本(我通过其他搜索发现的2个不同的功能，我都独立尝试过):
<script>
// $('.signup').on('click', function(e){
// e.preventDefault();
// $('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
// });
// $('.signup').on('click',function(){
// $('#theModal').modal('show').find('.modal-content').load('contact.html',function(){
// $('#theModal').modal({show:true});
// });
// });
</script>
我遇到了和其中一个评论者一样的问题:[Error] TypeError:'$('...').modal('...').find('...').load' is not a function.
如果你正在使用jQuery加载模态，然后从注册按钮中删除data-toggle和data-target。此外，我建议将链接存储在不同的属性中，因为使用href.
可能会有些不稳定。<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html">Sign Up</button>
$('.signup').on('click', function(e){
$('#theModal').modal('show').find('.modal-content').load($(this).attr('linkFile'));
});
另一个选择可能是尝试拆分'show'..虽然这可能不是问题……但我认为值得一试
$('.signup').on('click', function(e){
$('#theModal').find('.modal-content').load($(this).attr('linkFile'));
$('#theModal').modal('show')
});
我只是一个编码人员，并且采购了错误版本的jquery (slim，它不支持.load()等ajax调用)。确保使用完整版的jquery!!