Используя макет jquery в диалоге начальной загрузки Twitter

Question

Мне нужно использовать макет 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;
}

Answer 1

С модалами, вкладками и т. Д. Вам нужно подождать, пока размер элемента и в 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);
    });
});