Добавление модального диалога jQuery в гармошку - PullRequest
Новая
       31

Добавление модального диалога jQuery в гармошку

0 голосов
/ 28 июля 2010

Я только что начал использовать jQuery в последние пару недель и действительно наслаждаюсь этим - чертовски фантастическая вещь!У меня сейчас есть одна проблема.Вот основная структура моей страницы: 

<body>
  <div id="accordionContainer">
    <div class="accordionSectionHeader">
      Some header label...
    </div>
    <div class="accordionSectionContent">
      Some content...
      <a href="#">Popup dialog</a>
    </div>
  </div>

  <div id="dialog">
    Some dialog content here...
  </div>
</body>

Это довольно простой макет - когда вы нажимаете ссылку «Всплывающее диалоговое окно», отображается диалоговое окно div, расположенное поверх ссылки.Все идет нормально.Теперь я столкнулся с проблемой - я установил модальную опцию диалога в «true», но я все еще могу нажимать на вещи внизу, включая заголовки секций аккордеона!Я что-то здесь пропустил?Не могу понять, что происходит, потому что я очень новичок здесь.

Буду очень признателен за любые предложения или помощь.

Большое спасибо, Дэни.

1 Ответ

1 голос
/ 28 июля 2010

Первые впечатления:

Используйте firebug, чтобы проверить, отображается ли div на экране (и т. Д.) Где-то в коде, поскольку jQuery любит блокировать взаимодействие под модальным способом, блокируя вас пустым div размером с экран.

Также проверьте свойство Z-Index ваших элементов, чтобы убедиться, что аккордеонное меню не находится поверх этого блокиратора.

Вернусь назад, когда появится какая-нибудь форма кода:)

EDIT

В вашем коде, через который вы разместили сообщение, отсутствует файл css JQuery UI. Файл css, который загружается вместе с js-файлами UI, управляет форматированием элементов UI.

Возможно, вам не нужен весь файл, потому что это повлияет на каждый используемый вами виджет пользовательского интерфейса jquery, но важная строка, которая вам нужна: 

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
...