jQuery 带有远程 Modal 的 Bootstrap 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34763090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 with remote Modal
提问by Zeeshan
I can't make the Modal work in the remote mode with the new Twitter Bootstrap release : Bootstrap 4 alpha. It works perfectly fine with Bootstrap 3. With bootstrap 4 I am getting the popup window, but the model body is not getting loaded. There is no remote call being made to myRemoteURL.doto load the model body.
我无法使用新的 Twitter Bootstrap 版本：Bootstrap 4 alpha 使 Modal 在远程模式下工作。它与 Bootstrap 3 一起工作得很好。使用 bootstrap 4 我得到了弹出窗口，但模型主体没有被加载。没有远程调用myRemoteURL.do来加载模型体。
Code:
代码：
<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>
<!-- Model -->
<div class="modal fade" id="myModel" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">Model Title</h3>
</div>
<div class="modal-body">
<p>
<img alt="loading" src="resources/img/ajax-loader.gif">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
回答by Zeeshan
Found the problem: They have removed the remote option in bootstrap 4
remote: This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
remote：此选项自 v3.3.0 起已弃用，并将在 v4 中删除。我们建议改为使用客户端模板或数据绑定框架，或者自己调用 jQuery.load。
I used JQuery to implement this removed feature.
我使用 JQuery 来实现这个被移除的特性。
$('body').on('click', '[data-toggle="modal"]', function(){
$($(this).data("target")+' .modal-body').load($(this).data("remote"));
});
回答by Marcelo Bonus
According to official documentation, we can do the follow(https://getbootstrap.com/docs/4.1/components/modal):
根据官方文档，我们可以执行以下操作（https://getbootstrap.com/docs/4.1/components/modal）：
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
So, I believe this is the best approach:
所以，我相信这是最好的方法：
$('#modal_frame').on('show.bs.modal', function (e) {
$(this).find('.modal-content').load(e.relatedTarget.href);
});
e.relatedTarget is the anchor() that triggers the modal.
e.relatedTarget 是触发模态的anchor()。
Adapt to your needs
适应您的需求
回答by Zim
As some of the other answers and Bootstrap docsindicate, Bootstrap 4requires handling the show.bs.modalevent to load content into the modal. This can be used to either load content from an HTML string, or from a remote url. Here's a working example...
正如其他一些答案和Bootstrap 文档所示，Bootstrap 4需要处理show.bs.modal事件以将内容加载到模态中。这可用于从 HTML 字符串或远程 url 加载内容。这是一个工作示例......
$('#theModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
// load content from HTML string
//modal.find('.modal-body').html("Nice modal body baby...");
// or, load content from value of data-remote url
modal.find('.modal-body').load(button.data("remote"));
});
Another option is to open the modal once data is returned from an Ajax call...
另一种选择是在从 Ajax 调用返回数据后打开模态...
$.ajax({
url: "http://someapiurl",
dataType: 'json',
success: function(res) {
// get the ajax response data
var data = res.body;
// update modal content
$('.modal-body').text(data.someval);
// show modal
$('#myModal').modal('show');
},
error:function(request, status, error) {
console.log("ajax call went wrong:" + request.responseText);
}
});
回答by Muflix
In Asp.NET MVC, this works for me
在 Asp.NET MVC 中，这对我有用
html
html
<a href="#" onclick="Edit(1)">Edit item</a>
<div class="modal" id="modalPartialView" />
jquery
查询
<script type="text/javascript">
function Edit(id)
{
$.ajax({
url: "@Url.Action("ActionName","ControllerName")",
type: 'GET',
cache: false,
data: {id: id},
}).done(function(result){
$('#modalPartialView').html(result)
$('#modalPartialView').modal('show') //part of bootstrap.min.js
});
}
<script>
Action
行动
public PartialViewResult ActionName(int id)
{
// var model = ...
return PartialView("_Modal", model);
}
回答by David Sims
If you use the Jquery slim version (as in all the Bootstrap 4 docs and examples) the load function will fail
如果您使用 Jquery slim 版本（如在所有 Bootstrap 4 文档和示例中），加载功能将失败
You need to use the full version of Jquery
你需要使用完整版的Jquery
回答by user1520762
This process is loading the current dynamic. data remote = "remoteContent.html"
此过程正在加载当前动态。数据远程 = "remoteContent.html"
<!-- Link trigger modal -->
<a href="javascript:void(0);" data-remote="remoteContent.html" data-toggle="modal" data-target="#myModal" data-remote="true" class="btn btn-default">
Launch Modal
</a>
This trick : data-remote="remoteContent.html"
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>