четверг, 15 марта 2012 г.

twitter bootstrap: ширина модального окна

Многие не без причины любят twitter bootstrap. Среди его плагинов есть Modal dialog. И он замечателен. А если знать как модифицировать его ширину, жизнь становится вообще сказкой. No exception.

Вот как это можно сделать:

 $('#feedback-modal').modal({
        backdrop: true,
        keyboard: true
    }).css({
        width: 'auto',
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });

Рецепт подкинул некто rviscomi, вот здесь: https://github.com/twitter/bootstrap/issues/675#issuecomment-3664958.

9 комментариев:

  1. к сожалению обнаружилось что modal не работают при загрузке страницы (например чтобы сообщить что feedback удался), только по кнопке

    ОтветитьУдалить
    Ответы
    1. Должен работать и при загрузке.

      Если покажете кусочек неработающего кода, то может быть смогу вам помочь разобраться.

      Удалить
    2. в пустой html шаблон вставляем демо код с сайта, перегружаем страницу...
      (код здесь не вставляется)

      на самом сайте кстати, еще поповеры неправильно работают в модальном окне - появляются под ним

      Удалить
    3. Скорее всего, у вас какая-то ошибка, потому что - "боевой" код, который хорошо срабатывал.

      Удалить
    4. вы пробовали? ни тултипы, ни поповеры в модале не работают. сам модал корректно работает только от кнопки. весь код с сайта.

      Удалить
    5. вот поповеры и тултипы не пробовал - возможно, надо твикать z-index

      Удалить
    6. modal работает
      запуск:

      Удалить
  2. хм. вот эти строки мне пришлось убрать:
    ,
    'margin-left': function () {
    return -($(this).width() / 2);
    }

    ОтветитьУдалить