Пользовательский интерфейс JQuery UI

Question

Я пытаюсь создать модальный всплывающий эффект, используя JQuery UI 1.7.2 В основном мне нужен нормальный виджет ошибок, чтобы всплывающая часть оставалась заблокированной. Мы используем IE6 на работе, и нет никаких способов для обновления. В настоящее время я пытаюсь это.

<div id="errorPopup" style="display: none;">
  <div class="ui-overlay">
    <div class="ui-widget-overlay"></div>
    <div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 300px; position: absolute; top: 1em; left: 1em;"></div>
  </div>
  <div style="position: absolute; left: 35em; top: 30em; padding: 10px;" class="ui-state-error ui-widget ui-widget-content ui-corner-all">
    <div class="ui-state-error ui-dialog-content ui-widget-content" style="background: none; border: 0;">
      <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span>
        <strong>Opps:</strong> That wasn't meant to happen.
      </p>
    </div>
  </div>
</div>

Обратите внимание на использование классов пользовательского интерфейса JQuery. Это не работает, и я не знаю почему. Я стараюсь не писать свои собственные css и js, чтобы получить эффект, потому что причина перехода на JQuery UI была для него, чтобы он справился со мной.

Любые предложения приветствуются!

Answer 1

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

Вот простая версия:

<div id="dialog" title="Dialog Title" style="display:none;"></div>
<script>
    $(document).ready(function(){

        $('#dialog').dialog({ modal: true,
                bgiframe: true,
                open: function(){}
            });     
        });
</script>

Если вы хотите сделать это вручную, это будет что-то вроде:

<div class="ui-widget-overlay" style="width: 1263px; height: 2253px; z-index: 1001;"></div>
<div style="display: block; position: absolute; overflow: hidden; z-index: 1002; outline: 0px none; height: auto; width: 330px; top: 169px; left: 463px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;"><span class="ui-dialog-title" id="ui-dialog-title-dialog" unselectable="on" style="-moz-user-select: none;">Make an enquiry</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" style="-moz-user-select: none;"><span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;">close</span></a></div><div style="height: 242px; min-height: 117px; width: auto;" id="dialog" class="ui-dialog-content ui-widget-content">ERROR STUFF</div>

Как видите, это очень грязно!

Да, и еще кое-что: Убедитесь, что вы включили 'jquery.bgiframe.min.js' и 'bgiframe: true', поскольку это позволяет диалогу функционировать в IE6

Answer 2

Мне было бы интересно узнать, почему не работает пользовательский интерфейс jQuery.

Вы можете попробовать следующий плагин. Взгляните на демонстрационную страницу, чтобы увидеть, подходит ли она http://malsup.com/jquery/block/#