代码之家 › 专栏 › 技术社区 › MrJoeBlow

jquery ui自定义模式对话框

jquery-ui css jquery javascript

MrJoeBlow · 技术社区 · 15 年前

我正试图使用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的原因是它为我处理他的东西。

欢迎提出任何建议!

2 回复 | 直到 14 年前

Mazzi 15 年前

我想你想做的是手动激活对话框。我建议使用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中运行

Mutation Person 15 年前

我想知道为什么jquery ui不工作。

你可以试试下面的插件。看看演示页面,看看是否适合 http://malsup.com/jquery/block/#