Question

我以这种方式加载具有远程内容的模式

<a data-toggle="modal" data-target="#myModal" href="my-page.php">Click to open Modal</a>

现在我需要根据内容设置模态的大小... 然后我添加数据类

<a data-toggle="modal" data-target="#myModal" data-class="modal-lg" href="my-page.php">Click to open Modal</a>

<a data-toggle="modal" data-target="#myModal" data-class="modal-sm" href="my-page2.php">Click to open Modal</a>

然后我尝试了这个来设置大小

$('#myModal').on('shown.bs.modal', function () {
  var class = $(this).data('class');
  $(this).find('.modal-dialog').addClass(class);
});

但没有工作......

Answer 1

你的代码没有捕获打开模态的元素：

var class = $（this）.data（＆＃39; class＆＃39;）;

在此上下文this中指的是模态。

此外，class是ECMAScript5 / 6中的保留字（不能将其用作变量名）。

要获取正确的data-class值，您可以使用relatedTarget的{{1}}属性（作为函数参数传递）。

最后，删除可能存在的任何css类并添加正确的类：

event

演示：https://codepen.io/anon/pen/XzQByR

PS我使用$('#myModal').on('show.bs.modal', function (event) { var _trigger = $(event.relatedTarget) var _class = _trigger.data('class'); $(this) .find('.modal-dialog') .removeClass('modal-lg modal-sm') .addClass( _class); });事件，因为在调用show实例方法时会立即触发它（see the docs），并且在演示中，我使用show.bs.modal而不是{{1 }}

如何根据数据内容动态调整Twitter Bootstrap模式的大小

1 个答案: