twitter-bootstrap 带有远程 Modal 的 Bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18378720/
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 3 with remote Modal
提问by user2707039
I just started a new project with the new Twitter Bootstrap release : bootstrap 3. I can't make the Modal work in the remote mode. I just want that when I click on a link it shows the modal with the content of the remote url. It works but the modal layout is completely destroyed.
我刚刚使用新的 Twitter Bootstrap 版本开始了一个新项目：bootstrap 3。我无法让 Modal 在远程模式下工作。我只是希望当我点击一个链接时，它会显示带有远程 url 内容的模式。它有效，但模态布局被完全破坏。
Here is a link to a jsfiddle : http://jsfiddle.net/NUCgp/5/
这是 jsfiddle 的链接：http: //jsfiddle.net/NUCgp/5/
The code :
代码 ：
<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a>
<!-- Modal -->
<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-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body"><div class="te"></div></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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Can anyone make this simple example work ?
任何人都可以让这个简单的例子工作吗？
回答by koala_dev
Regarding the remote option for modals, from the docs:
关于模态的远程选项，来自文档：
If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element.
如果提供了远程 URL，内容将通过 jQuery 的 load 方法加载并注入到模态元素的根中。
That means your remote file should provide the complete modal structure, not just what you want to display on the body.
这意味着您的远程文件应该提供完整的模态结构，而不仅仅是您想要在正文中显示的内容。
Bootstrap 3.1 Update:
Bootstrap 3.1 更新：
In v3.1 the above behavior was changed and now the remote content is loaded into .modal-content
在 v3.1 中，上述行为已更改，现在远程内容已加载到 .modal-content
See this Demo fiddle
看到这个演示小提琴
Boostrap 3.3 Update:
Boostrap 3.3 更新：
This option is deprecated since v3.3.0 and has been removed in v4.We recommend instead using client-side templating or a data binding framework, or calling jQuery.loadyourself.
此选项自 v3.3.0 起已弃用，并已在 v4 中删除。我们建议改为使用客户端模板或数据绑定框架，或者自己调用jQuery.load。
回答by zorkle
For Bootstrap 3
对于 Bootstrap 3
The workflow I had to deal with was loading content with a url context that could change. So by default setup your modal with javascript or the href for the default context you want to show :
我必须处理的工作流程是使用可能更改的 url 上下文加载内容。因此，默认情况下，使用 javascript 或要显示的默认上下文的 href 设置您的模式：
$('#myModal').modal({
show: false,
remote: 'some/context'
});
Destroying the modal wouldn't work for me because I wasn't loading from the same remote, thus I had to :
销毁模态对我不起作用，因为我不是从同一个遥控器加载的，因此我必须：
$(".some-action-class").on('click', function () {
$('#myModal').removeData('bs.modal');
$('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
$('#myModal').modal('show');
});
This of course was easily refactored into a js library and gives you a lot of flexibility with loading modals
这当然很容易重构为一个 js 库，并为您提供加载模式的很大灵活性
I hope this saves someone 15 minutes of tinkering.
我希望这可以为某人节省 15 分钟的修补时间。
回答by MM.
If you don't want to send the full modal structure you can replicate the old behaviour doing something like this:
如果您不想发送完整的模态结构，您可以复制旧行为，执行以下操作：
// this is just an example, remember to adapt the selectors to your code!
$('.modal-link').click(function(e) {
var modal = $('#modal'), modalBody = $('#modal .modal-body');
modal
.on('show.bs.modal', function () {
modalBody.load(e.currentTarget.href)
})
.modal();
e.preventDefault();
});
回答by TheAdventurist
Here's my solution (leveraging a few above) that makes use of BS3's own structure to re-instate the old remote loading behaviour. It should be seamless.
这是我的解决方案（利用上面的一些），它利用 BS3 自己的结构来重新设置旧的远程加载行为。它应该是无缝的。
I'm going to keep the code variable heavy and descriptive to keep things understandable. I'm also assuming the presence of JQuery. Javascript heavy lifter types will handily streamline the code.
我将保持代码变量的繁重和描述性，以使事情易于理解。我还假设存在 JQuery。Javascript 繁重的类型将轻松地简化代码。
For reference here's a link that invokes a BS3 modal:
作为参考，这里有一个调用 BS3 模式的链接：
<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>
In youre Javascript you're going to need the following.
在您的 Javascript 中，您将需要以下内容。
// Make sure the DOM elements are loaded and accounted for
$(document).ready(function() {
// Match to Bootstraps data-toggle for the modal
// and attach an onclick event handler
$('a[data-toggle="modal"]').on('click', function(e) {
// From the clicked element, get the data-target arrtibute
// which BS3 uses to determine the target modal
var target_modal = $(e.currentTarget).data('target');
// also get the remote content's URL
var remote_content = e.currentTarget.href;
// Find the target modal in the DOM
var modal = $(target_modal);
// Find the modal's <div class="modal-body"> so we can populate it
var modalBody = $(target_modal + ' .modal-body');
// Capture BS3's show.bs.modal which is fires
// immediately when, you guessed it, the show instance method
// for the modal is called
modal.on('show.bs.modal', function () {
// use your remote content URL to load the modal body
modalBody.load(remote_content);
}).modal();
// and show the modal
// Now return a false (negating the link action) to prevent Bootstrap's JS 3.1.1
// from throwing a 'preventDefault' error due to us overriding the anchor usage.
return false;
});
});
We're just about there. One thing you may want to do is style the modal body with a max-height, so that long content will scroll.
我们就快到了。您可能想要做的一件事是使用最大高度设置模态主体的样式，以便长内容滚动。
In your CSS, you'll need the following:
在您的 CSS 中，您将需要以下内容：
.modal-body{
max-height: 300px;
overflow-y: scroll;
}
Just for refference I'll include the modal's HTML, which is a knock-off of every Bootsrap Modal Example you've ever seen:
仅供参考，我将包含模态的 HTML，它是您见过的每个 Bootsrap 模态示例的仿制品：
<div id="terms" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="termsLabel" class="modal-title">TERMS AND CONDITIONS</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by MBHNYC
I did this:
我这样做了：
$('#myModal').on 'shown.bs.modal', (e) ->
$(e.target).find('.modal-body').load('http://yourserver.com/content')
回答by esvendsen
As much as I dislike modifying Bootstrap code (makes upgrading more difficult), you can simply add ".find('.modal-body') to the load statement in modal.js as follows:
尽管我不喜欢修改 Bootstrap 代码（使升级更加困难），您可以简单地将“.find('.modal-body') 添加到 modal.js 中的加载语句中，如下所示：
// original code
// if (this.options.remote) this.$element.load(this.options.remote)
// modified code
if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote)
回答by Brandon Fitzpatrick
Here is the method I use. It does not require any hidden DOM elements on the page, and only requires an anchor tag with the href of the modal partial, and a class of 'modalTrigger'. When the modal is closed (hidden) it is removed from the DOM.
这是我使用的方法。它不需要页面上任何隐藏的DOM元素，只需要一个带有模态部分href的锚标记，以及一个'modalTrigger'类。当模态关闭（隐藏）时，它会从 DOM 中移除。
(function(){
// Create jQuery body object
var $body = $('body'),
// Use a tags with 'class="modalTrigger"' as the triggers
$modalTriggers = $('a.modalTrigger'),
// Trigger event handler
openModal = function(evt) {
var $trigger = $(this), // Trigger jQuery object
modalPath = $trigger.attr('href'), // Modal path is href of trigger
$newModal, // Declare modal variable
removeModal = function(evt) { // Remove modal handler
$newModal.off('hidden.bs.modal'); // Turn off 'hide' event
$newModal.remove(); // Remove modal from DOM
},
showModal = function(data) { // Ajax complete event handler
$body.append(data); // Add to DOM
$newModal = $('.modal').last(); // Modal jQuery object
$newModal.modal('show'); // Showtime!
$newModal.on('hidden.bs.modal',removeModal); // Remove modal from DOM on hide
};
$.get(modalPath,showModal); // Ajax request
evt.preventDefault(); // Prevent default a tag behavior
};
$modalTriggers.on('click',openModal); // Add event handlers
}());
To use, just create an a tag with the href of the modal partial:
要使用，只需使用模态部分的 href 创建一个标签：
<a href="path/to/modal-partial.html" class="modalTrigger">Open Modal</a>
回答by Tim Kretschmer
another great and easy way is to have a blindmodal in your layout and call it if neccessary.
另一个伟大而简单的方法是在您的布局中有一个盲模式，并在必要时调用它。
JS
JS
var remote_modal = function(url) {
// reset modal body with a spinner or empty content
spinner = "<div class='text-center'><i class='fa fa-spinner fa-spin fa-5x fa-fw'></i></div>"
$("#remote-modal .modal-body").html(spinner)
$("#remote-modal .modal-body").load(url);
$("#remote-modal").modal("show");
}
and your HTML
和你的 HTML
<div class='modal fade' id='remote-modal'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-body'></div>
<div class='modal-footer'>
<button class='btn btn-default'>Close</button>
</div>
</div>
</div>
</div>
</body>
now you can simply call remote_modal('/my/url.html')and the content gets displayed inside of the modal
现在您可以简单地调用remote_modal('/my/url.html')并且内容显示在模态内
回答by yardpenalty.com
I do it this way:
我这样做：
<!-- global template loaded in all pages // -->
<div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="newsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="newsLabel"></h3>
</div>
<div class="modal-body">
<div class="loading">
<span class="caption">Loading...</span>
<img src="/images/loading.gif" alt="loading">
</div>
</div>
<div class="modal-footer caption">
<button class="btn btn-right default modal-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is my a href:
这是我的一个href：
<a href="#NewsModal" onclick="remote=\'modal_newsfeed.php?USER='.trim($USER).'&FUNCTION='.trim(urlencode($FUNCTIONCODE)).'&PATH_INSTANCE='.$PATH_INSTANCE.'&ALL=ALL\'
remote_target=\'#NewsModal .modal-body\'" role="button" data-toggle="modal">See All Notifications <i class="m-icon-swapright m-icon-dark"></i></a>
