Использование simplemodal (модальный) - не работает правильно в IE - модальные дисплеи, но элементы фона доступны для нажатия;работает в Firefox, хотя - PullRequest
Новая
       18

Использование simplemodal (модальный) - не работает правильно в IE - модальные дисплеи, но элементы фона доступны для нажатия;работает в Firefox, хотя

0 голосов
/ 12 ноября 2011

У меня возникли проблемы с реализацией версии модального окна SimpleModal (http://www.ericmmartin.com/projects/simplemodal/)). Он корректно работает в браузере, таком как Firefox, но не работает должным образом в IE - элементы фона являются интерактивными и функциональными, что не является желаемым эффектом модального окна. Почему IE не работает должным образом с simplemodal (кроме того, что это IE) и как я могу установить исправление?

Это сценарии, которые я использую: 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery.simplemodal.1.4.1.min.js"></script>

Вот HTML-код и код: 

<body>
  <div id="Content">
    <a href="http://www.google.com">google</a>
    <input type="button" value="click me" onclick="javascript:alert('should not work');">Hello World
    <input type="button" value="open modal" onclick="javascript:$.modal('<div><h1>Simple Modal</h1></div>');">
  </div>
</body>

Большое спасибо за любую помощь.

Обновление

Я отредактировал вопрос и краткое изложение моего положения. Хочу подчеркнуть, что я проверил это в Firefox, и он работает. Моя проблема в том, что он не работает должным образом в IE.

Ответы [ 3 ]

1 голос
/ 12 ноября 2011

В вашем примере кода вы должны правильно закрыть теги ввода и удалить лишние двоеточия во втором входе. Также, чтобы проверить, работает ли он, возможно, вам следует добавить простые модальные стили CSS, по крайней мере, для наложения: 

#simplemodal-overlay {background-color:#000; cursor:wait;}

Также проверьте консоль разработчика на наличие ошибок. Во всяком случае, я попробовал ваш код, и кнопка «Нажми меня» отключена в порядке.

1 голос
/ 12 ноября 2011

Беглый взгляд на плагин, я думаю, что всплывающее событие не обрабатывается должным образом: 

// bind the overlay click to the close function, if enabled
if (s.o.modal && s.o.close && s.o.overlayClose) {
  s.d.overlay.bind('click.simplemodal', function (e) {
    e.preventDefault();
    s.close();
  });
}

Я, правда, немного не в себе, но насколько яМожно сказать, что оверлей фактически не имеет поведения по умолчанию, которое необходимо предотвратить.Что нужно предотвратить, так это распространение событий.

Попробуйте добавить это над строкой protectDefault в неминифицированной версии самого плагина (вы также можете просто сохранить protectDefault, без вреда): 

e.stopPropagation();

Конечно, вы должны включать этот не минимизированный скрипт, а не тот, который вы сейчас используете.Мне было бы интересно узнать, поможет ли это.Извиняюсь за представление «ответа» без фактического его тестирования, но установка теста требует больше времени, чем я бы предпочел.; -)

Недостаток, если он ДЕЙСТВУЕТ: сложно найти правильное место, чтобы вставить это в уменьшенную версию.Может быть, проще самим заново минимизировать все это с помощью инструмента по вашему выбору.

[Приложение:] Если e.stopPropagation(); не работает, вы можете пойти в старую школу и добавить 

return false;

после s.close();

0 голосов
/ 14 ноября 2011

Я скачал демо и разбил его на части скелета. Оказывается, эта строка в одном из файлов css отключает все элементы фона. 

#simplemodal-overlay {background-color:#000; cursor:wait;}

Это внутренний div для simplemodal, и установка курсора на «wait» является ответом. Версия IE, похоже, тоже ничего не изменила.

...