jQuery Dialog - 动画对话框从中心移动到右上角

Posted 2023-05-08

【中文标题】jQuery Dialog - 动画对话框从中心移动到右上角

【英文标题】：jQuery Dialog - animate dialog to move from center to top-right

【发布时间】：2011-08-02 17:51:01

【问题描述】：

我有一个带有验证插件设置的表单。当表单提交并出现错误时，我会在对话框（非模式）中显示错误字段。

表单可以很快变得非常长（业务需求不断添加字段），我将对话框中的错误字段设置为可单击以将窗口滚动到 from 中的字段并突出显示这些字段。此时不会关闭对话框。

这个对话框是居中开始的，一旦用户开始点击链接，我需要将对话框移到用户的位置，并突出显示（jQuery 效果）下面的字段。

为此，我提出了以下代码，并且对话框似乎动画到顶部而不是右侧。当我将“右”更改为“左”时，它工作正常。

下面是代码和一个可以玩的 jsbin - http://jsbin.com/avigi3/4/

$('a.field').click(function()
    $(this).closest('.ui-dialog').animate( 
        right : '0', /*left:'0' works fine here*/
        top : $(window).scrollTop()
    , 'slow');
);

我调试了 jQuery.animate 代码，这是我的笔记：

jQuery.animate() 以属性的当前值“开始”并逐渐动画到传入的目标值。例如：在调用中，top 从对话框的当前顶部值开始，并减少到窗口的滚动顶部（浏览器视口的可见顶部）。 现在，问题就在这里。即使对话框是居中对齐的，它的 'right' 属性也不存在，因为 jQuery-ui 使用 'left' 属性来居中（绝对定位）对话框。而且由于“正确”不存在，“正确”的动画序列似乎不起作用。

有人遇到过这个问题吗？有什么办法可以重置对话框的“正确”位置，使其具有“某些”价值？或者我可以配置 jQuery 对话框，以便它在以编程方式更改位置而不是通过拖动手动更改时动画。

谢谢， -赛姆

【参考方案1】：

试试这个

$('a.field').click(function()
    dialog = $(this).closest('.ui-dialog')
    dialog.animate( 
        left: document.width - dialog.width(), // or you might want to use .outerWidth()
        top: $(window).scrollTop()
    , 'slow');
);

【参考方案2】：

对于未来的读者来说，Shrikant 的回答将是一个更快的解决方案，并且针对通话，并且效果很好。只需更改宽度以使用 offsetWidth() 来考虑填充/边距。

我最终完成了 jQuery UI 代码，并找到了一个通用实现。这适用于 jquery-ui 1.8.10。

一旦通过计算 left:xxx, top:xxx 确定对话框的移动位置，jQuery-dialog 就会使用Position 实用程序来定位和重新定位 ui-dialog div。 Position 的选项之一是“使用”功能。如果定义了“使用”，它会触发该函数并传入 left:xxx, top:xxx 的对象。如果没有定义，它只会更新 ui-dialog 上的 css。这是代码的sn-p：

line number 9977 in jquery-ui version 1.8.10:
            if ( 'using' in options ) 
                options.using.call( elem, props );
             else 
                curElem.css( props );
            

您可以覆盖 Position 默认值上的 'using' 属性，但由于我仅用于对话框，因此我在对话框原型上覆盖了它：

$.extend($.ui.dialog.prototype.options, 
    position : 
        using : function(props) 
            $(this).animate( 
                left : props.left,
                top : props.top
            , 'slow');
        
    
);

我希望这会有所帮助！

谢谢， -赛姆

【讨论】：

这个答案非常有用 - 感谢您提出。但是，将 props 参数直接传递给 .animate 会更简洁，这样您就不会重复自己： $(this).animate(props);再次感谢！

它改变了全局行为，在实践中不太适用。看看这个，***.com/questions/6849352/…