JQuery UI 自定义模式对话框答案

【问题标题】：JQuery UI Custom modal dialogJQuery UI 自定义模式对话框
【发布时间】：2010-02-11 13:35:55
【问题描述】：

我正在尝试使用 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 UI 类的使用。这不起作用，我真的不知道为什么。我试图避免编写自己的 css 和 js 来获得效果，因为迁移到 JQuery UI 的原因是它可以为我处理他的东西。

欢迎提出任何建议！

【问题讨论】：

你的 jQuery 代码是什么样的？发生了什么不应该发生的事情？
您拼错了“哎呀” :-) 当您说它不起作用时，究竟出了什么问题？我知道 IE6 会出现问题的主要问题是对话框代码可以插入在页面和对话框之间（在“z”轴上）的半透明层。
您是否考虑过使用现有的库来处理这些事情？我喜欢facebox (famspam.com/facebox) 还有一个叫lightbox，超级流行。
问题是半透明层没有出现。在 Firefox 中，图层会出现，但图层上方会显示一些链接。

标签： javascript jquery css jquery-ui

【解决方案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 中运行

【讨论】：

您好，谢谢您的回答。但我并没有尝试这样实现对话框。我希望它是模态的，但只是显示错误 ui 小部件。如果我做你建议的第一件事，那么它会为我创建一个正常的对话框。
@TAkinremi：也许我没有完全理解你。如果 bgiframe 不能在 IE 中运行，请尝试 bgiframe。

【解决方案2】：

我很想知道为什么 jQuery UI 不起作用。

您可以尝试以下插件。看看演示页面，看看它是否适合 http://malsup.com/jquery/block/#

【讨论】：

我不太了解自己，但是它在 Firefox 中几乎可以完美运行，所以我必须有一些额外的东西才能让它在 IE6 上运行。