带有远程 Modal 的 Bootstrap 3

我刚刚发布了一个新的 Bootstrap 项目: bootstrap 3。 我无法让 Modal 在远程模式下工作。我只是想当我点击一个链接，它显示与远程网址的内容模式。 它的工作，但模态布局是完全破坏。

这里有一个到 jsfiddle 的链接: http://jsfiddle.net/NUCgp/5/

密码:

<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">&times;</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 -->

有人能做出这个简单的例子吗？

328185 次浏览
小开
最佳答案

关于模态的远程选择，来自 那些文件:

如果提供了远程 URL，内容将通过 jQuery 的加载加载 方法和注入 进入模态元素的根。

这意味着您的远程文件应该提供完整的模态结构，而不仅仅是您希望在主体上显示的模态结构。

Bootstrap 3.1更新:

在 v3.1中，上面的行为被改变了，现在远程内容被加载到 .modal-content中

看这个 演示小提琴

Boostrap 3.3更新:

这个选项从3.3.0版本开始就不推荐使用，在4版本中已经被删除了。我们建议使用客户端模板或数据绑定框架，或者自己调用 JQuery load。

小开

如果你不想发送完整的模态结构，你可以复制以前的行为，比如:

// 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();
});
小开

尽管我不喜欢修改 Bootstrap 代码(使得升级更加困难) ，但您可以简单地添加“。发现(’。以下是 modal.js 中的 load 语句:

// 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)
小开

我是这么做的:

$('#myModal').on 'shown.bs.modal', (e) ->
$(e.target).find('.modal-body').load('http://yourserver.com/content')
小开

为了鞋带3

我必须处理的工作流是用一个可以更改的 URL 上下文加载内容。因此，默认情况下，使用 javascript 或 href 设置您想要显示的默认上下文的模式:

$('#myModal').modal({
show: false,
remote: 'some/context'
});

破坏模式对我来说不起作用，因为我不是从同一个远程加载，因此我必须:

$(".some-action-class").on('click', function () {
$('#myModal').removeData('bs.modal');
$('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
$('#myModal').modal('show');
});

当然，这很容易被重构到 js 库中，并且在加载模式方面提供了很大的灵活性

我希望这能帮某人节省15分钟的修补时间。

小开

下面是我的解决方案(利用上面的一些方法) ，它利用 BS3自己的结构来重新恢复旧的远程加载行为。应该天衣无缝。

我将保持代码变量的重量级和描述性，以使事情易于理解。 我还假设 JQuery.Javascript 重型提升类型的出现将方便地简化代码。

这里有一个调用 BS3模式的链接，以供参考:

<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>

在你的 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;
});
});

我们马上就到了。您可能想要做的一件事情是使用 max-height 设置模式主体的样式，以便长内容可以滚动。

在 CSS 中，您需要以下内容:

.modal-body{
max-height: 300px;
overflow-y: scroll;
}

作为参考，我将包括模态的 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">&times;</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 -->
小开

下面是我使用的方法。它不需要页面上任何隐藏的 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
}());

要使用，只需创建一个带有模态片段的 href 的标记:

<a href="path/to/modal-partial.html" class="modalTrigger">Open Modal</a>
小开

我是这么做的:

<!-- 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>

这就是我的秘诀:

<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>
小开

另一个伟大和容易的方法是有一个 瞎了模态在您的布局，并调用它，如果必要的。

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");
}

以及你的 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>

现在您可以简单地调用 remote_modal('/my/url.html')，内容就会显示在模态中


提交答案