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 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中运行

Answer 2

我会对jQuery UI无效的原因感兴趣。

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

JQuery UI自定义模式对话框

2 个答案: