#javascript #jquery #jquery-ui #modal-dialog #simplemodal
#javascript #jquery #jquery-ui #modal-dialog #simplemodal
Вопрос:
У меня возникли проблемы с реализацией 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.
Ответ №1:
В вашем примере кода вы должны правильно закрыть теги ввода и удалить лишнее двоеточие во втором вводе. Также, чтобы проверить, работает ли это, возможно, вам следует добавить простые модальные стили CSS, по крайней мере, для наложения:
#simplemodal-overlay {background-color:#000; cursor:wait;}
Также проверьте консоль разработчика на наличие ошибок.
В любом случае, я попробовал ваш код, и кнопка «нажмите на меня» отключена, как и должно быть.
Комментарии:
1. Большое вам спасибо за вашу помощь. Прошу прощения за неясность, поскольку я изменил вопрос. Это работает в Firefox, но не работает в IE.
2. вы также должны указать, какая версия IE
Ответ №2:
Бегло взглянув на плагин, я бы предположил, что всплывающее окно события обрабатывается неправильно:
// bind the overlay click to the close function, if enabled
if (s.o.modal amp;amp; s.o.close amp;amp; s.o.overlayClose) {
s.d.overlay.bind('click.simplemodal', function (e) {
e.preventDefault();
s.close();
});
}
Я, по общему признанию, немного не в своей тарелке, но, насколько я могу судить, наложение на самом деле не имеет никакого поведения «по умолчанию», которое необходимо предотвратить. Что необходимо предотвратить, так это распространение событий.
Попробуйте добавить это над строкой preventDefault в не уменьшенной версии самого плагина (вы также можете просто сохранить preventDefau< вреда не будет):
e.stopPropagation();
Конечно, вы должны включать этот не уменьшенный скрипт, а не тот, который вы включаете в данный момент. Мне было бы любопытно узнать, помогает ли это. Прошу прощения за представление «ответа» без фактического его тестирования, но настройка теста требует больше времени, чем я бы предпочел. 😉
Недостаток, если это ДЕЙСТВИТЕЛЬНО работает: сложно найти нужное место, чтобы вставить это в уменьшенную версию. Возможно, было бы проще минимизировать все это самостоятельно с помощью инструмента по вашему выбору.
[Дополнение:] Если e.stopPropagation(); не работает, вы могли бы пойти по старой школе и добавить
return false;
после s.close();
Комментарии:
1. Большое вам спасибо за вашу помощь и ввод. К сожалению, я допустил серьезную ошибку в формулировке моего вопроса и резюме, поскольку модальный не работает в IE. Он хорошо тестируется в Firefox, но проблема в IE.
2. Вы могли бы попробовать предложенное мной изменение и посмотреть, по-прежнему ли проблема в IE. 😉
Ответ №3:
Я скачал демо и разобрал его на отдельные части. Оказывается, эта строка в одном из файлов css отключает все фоновые элементы.
#simplemodal-overlay {background-color:#000; cursor:wait;}
Это внутренний div для simplemodal, и установка курсора в положение «ждать» является ответом. Версия IE, похоже, также не имеет значения.