jqmodal IE (7 или 8) мигает черным перед загрузкой модального - PullRequest
Новая
       12

jqmodal IE (7 или 8) мигает черным перед загрузкой модального

1 голос
/ 22 сентября 2009

Это убивает меня. И в IE7, и в 8, используя jqModal, экран мигает черным перед загрузкой модального содержимого. Я создал тестовое приложение, чтобы показать вам, что происходит. Я взял jqModal именно с сайта, никаких изменений, никаких внешних CSS, которые могли бы повлиять на мое приложение. Он отлично работает в любом другом браузере (включая IE6).

http://jqmtest.heroku.com/

Итак, первые две ссылки - это вызовы ajax, вторая - прямой встроенный HTML. (Первоначально я думал, что это влияет на ajax, но, похоже, это не так, потом я подумал, что это медленная загрузка ajax, следовательно, на две разные ссылки ajax)

Что сумасшедшего, так это то, что сам сайт jqmodal отлично работает в IE, без мерцания черного, но я не вижу, что я делаю неправильно. Код прямой

HTML: 

<body>
<div id="ajaxModal" class="jqmWindow"></div>
<div id="inlineModal" class="jqmWindow">
  <div style="height:300px;position:relative;">  
    <p>Here's some inline content</p>
    <a href="#" onclick='$("#inlineModal").jqmHide();return false;' style="position:absolute;bottom:10px;right:10px">Close</a>
  </div>
</div>
<div style="width:600px;height:400px;margin:auto;background:#eee;">
  <p><a href="/ajax/short" class="jqModal">Short loading modal</a></p>
  <br />
  <p><a href="/ajax/long" class="jqModal">Longer loading modal</a></p>
  <br />
  <p><a href="#" class="jqInline">inline modal</a></p>
</div>    
</body>

Javascript: 

<script type="text/javascript">
  $(function(){
    $("#ajaxModal").jqm({ajax:'@href', modal:true});
    $("#inlineModal").jqm({modal:true, trigger:'.jqInline'});
  });
</script>

CSS точно такой же, как тот, который был загружен с сайта jqModal, поэтому я его опущу, но вы можете увидеть его в моем приложении

Кто-нибудь испытывал это? Я не понимаю, как он работает, а мой нет.

Ответы [ 3 ]

1 голос
/ 07 октября 2011

Я думаю, что нашел решение этой неясной проблемы.

Изменение 

o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100});

до 

o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100}).hide();

и изменить 

h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):F;

до 

h.o=(o)?o.addClass(c.overlayClass).prependTo('body').show():F;
0 голосов
/ 24 марта 2010

Я попробовал решение jimyi, но оно не решило проблему для меня Итак, вот что я придумала:

В моем CSS я добавил новое правило 

.jqmOverlay { display: none; }

и когда я выскакиваю этот конкретный модальный диалог, я делаю это: 

$("#pleaseWait").jqmShow();   // show the modal dialog
$(".jqmOverlay").fadeIn(10);  // very quick fade-in

Появление работает, чтобы переопределить правило CSS, и черная вспышка устранена.

Примечание. Я не тестировал его, но действие fadeIn может помешать отображению модального диалогового окна, в котором наложение не является полностью прозрачным.

0 голосов
/ 18 октября 2009

Поиграв с источником, я нашел обходной путь. Измените строку 41 (в jqModal r14) с: 

if(c.modal) {if(!A[0])L('bind');A.push(s);}

до 

if(c.modal) {A.push(s);}

Я также разместил здесь исправление вместе с демонстрацией для IE7 . Я не совсем уверен, что делает это изменение, так как источник минимизирован (хотя я предполагаю, что он может что-то сделать, показывая несколько модалов одновременно), поэтому обязательно протестируйте его полностью, чтобы убедиться, что он не сломается что-нибудь.

...