JQuery UI 自定义模态对话框

Question

我正在尝试使用 JQuery UI 1.7.2 创建模态弹出效果基本上我需要一个普通的 Error 小部件来弹出页面的其余部分。我们在工作中使用 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 UI 类的使用。这不起作用，我真的不知道为什么。我试图避免编写自己的 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 中运行