1

我需要在引导对话框中使用 jquery 布局。我尝试在一个简单的示例中使用 jquery 布局并且它可以工作：Simple_Example但是当我在对话框中使用它时它似乎不起作用。

它的 jsfiddle：带有布局的对话框。

我的 HTML：

<a href="#" class="btn btn-default" id="openBtn">Open modal</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-header">
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <div id="content">
<div class="ui-layout-center">Center</div>
<div class="ui-layout-west">West</div>
</div>
  </div>
  <div class="modal-footer">
  </div>
</div>

JS：

$('#openBtn').click(function(){
 $('#content').layout({ applyDefaultStyles: true });
    $('#myModal').modal({show:true})
});

CSS：

#content{

    height:200px;
}
4

1 回答 1

0

对于模态框、选项卡等，您需要等到元素调整大小并在 DOM 中，然后才能对其进行修改或应用功能。在这种情况下，我们将使用 Bootstrap 的shown回调。

http://jsfiddle.net/isherwood/cp67J/1053

$('#openBtn').click(function () {
    $('#myModal').modal({
        show: true
    }).on('shown.bs.modal', function (e) {
        $('#content').layout({
            applyDefaultStyles: true
        });
    });
});

以下是您可以防止可见样式更改的方法：

http://jsfiddle.net/isherwood/6Y5DC

#content {
    opacity: 0;
}

$('#openBtn').click(function () {
    $('#myModal').modal({
        show: true
    }).on('shown.bs.modal', function (e) {
        $('#content').layout({
            applyDefaultStyles: true
        });
        $('#content').animate({
            opacity: 1
        }, 400);
    });
});
于 2014-06-25T12:51:59.740 回答