草庐IT

jQuery Show Dialog Modal Animation 在背景变暗时发生

codeneng 2023-03-28 原文

jQuery Show Dialog Modal Animation Happens while Background Dimmed

这是我忍了太久的烦恼，终于决定追寻一个答案。我在我的网络应用程序中显示了一个模态 jQuery 对话框，但显示它的动画没有以正确的顺序出现。我正在为页面上的链接设置一个单击事件(使用 jQuery)，当用户单击它时，它会创建一个新对话框，其中 autoOpen 设置为 true。从对话框中取消会破坏它，以便用户可以在下次单击时再次打开它。

无论我使用什么动画(目前使用"blind")，似乎整个页面先变暗，然后打开对话框(仍然变暗)，一旦对话框完全打开，它就会取消它。只是没有按正确的顺序发生。有没有其他人看到过这个，或者知道为什么会发生这种情况？我用来创建对话框的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function setDialogWindows($dialogDiv, $leftList, $rightList, leftArray, rightArray, $htmlItemList) {

    $dialogDiv.dialog({
        autoOpen: true,
        modal: true,
        show: 'blind',
        hide: 'blind',
        width: 600,
        resizable: false,
        buttons: {
            Cancel: function() {
                resetDialog($leftList, $rightList);
                $(this).dialog('destroy');
            },
            'Save': function() {

                if (saveDialog($leftList, $rightList, leftArray, rightArray, $htmlItemList)) {
                    showHideItemList("show");
                }
                else
                    showHideItemList("hide");

                $(this).dialog('destroy');
            }
        }
    });
}

任何帮助将不胜感激。谢谢。

  • 我不确定您要查找的顺序。您希望背景保持暗淡，直到用户从对话框中单击"保存"或"取消"？！？
  • @Brad，刚刚看到这条评论。不，我只是在描述它目前的表现。目前，背景首先变暗，然后通过动画出现对话框，但也一直变暗(很难看到，但它肯定会在变暗的背景中"盲入")，并且只有在所有显示动画完成后才会对话框亮起，而其余的背景变暗。显然，我想看到背景变暗，并且已经亮起的对话框盲了。我只是不确定为什么它必须在亮起之前完成动画。

我能够让它在 IE 和 FireFox 中正确显示，其中页面变暗并且对话动画正确完成(非变暗)。您是否有任何其他作用于该 标记的 jQuery 脚本？

编辑：我只是能够重新创建这个问题。这似乎是对话框的初始显示与动画相结合的问题。在您的情况下，因为您不断创建/销毁对话框，所以每次都会出现。以下是您可能想尝试的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function setupDialog($dialogDiv) {
    // set autoOpen: false
    // within Cancel and Save use .dialog('close')
}

// Define the dialog boxes:
setupDialog($('#dialog1'));
setupDialog($('#dialog2'));
setupDialog($('#dialog3'));

// Show the dialog on button clicks:
$('#button1').click(function() {
    $('#dialog1').dialog('open');
});
$('#button2').click(function() {
    $('#dialog2').dialog('open');
});
$('#button3').click(function() {
    $('#dialog3').dialog('open');
});

  • @CAbbott，我不会在我的代码中的其他任何地方对该 div 做任何特定的事情。但是，我使用了一个名为 setDialog 的通用函数，我用它来构造三个单独的(非常相似的)对话框，并传入我想用来构造的 div。我传入的 div 是基于附加到页面上不同链接的点击事件。这可能与它有关吗？
  • @Matt - 可能:)。 2 件事要记住： 1) 像 \\'blind\\' 这样的动画是异步的，所以如果你用那个 div 标签做其他事情，它可能会弄乱显示。 2)您在该 div 标签上设置的任何先前的东西仍然有效(如切换)。是不是只有特效才能让它表现得那样？删除 \\'hide:\\' 和 \\'show:\\' 是否使其正常工作？
  • @CAbbott，这一切都发生得如此之快，但我很确定当我删除隐藏/显示效果时，这一切都是同时发生的。 IE。背景变暗，对话框同时出现。这比我拥有的要好，但我当然更喜欢(从用户体验的angular)动画。如果我在没有进入或退出动画的情况下离开它，我至少希望在对话框出现之前背景变暗，但现在我只是贪婪:)。您之前的编辑中的有趣见解。
  • @CAbbott，好吧，我将实现更改为您建议的方式，方法是预先创建它们，然后仅关闭并显示它们。但是，动画错误仍然存??在。再多一点信息...
  • @Matt - 是的，我在对话框的第一次显示上发生了这个错误，但在随后的显示中没有。在我看来，这似乎是 jQueryUI 的一个错误。

AnimationjQuerynbspsectionbranimationdialogjquerymodal-dialogshow

有关jQuery Show Dialog Modal Animation 在背景变暗时发生的更多相关文章

  1. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  2. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  3. ruby-on-rails - 启用 Rack::Deflater 时 ETag 发生变化 - 2

    在启用Rack::Deflater来gzip我的响应主体时偶然发现了一些奇怪的东西。也许我遗漏了一些东西，但启用此功能后，响应被压缩，但是资源的ETag在每个请求上都会发生变化。这会强制应用程序每次都响应，而不是发送304。这在没有启用Rack::Deflater的情况下有效，我已经验证页面源没有改变。我正在运行一个使用thin作为Web服务器的Rails应用程序。Gemfile.lockhttps://gist.github.com/2510816有没有什么方法可以让我从Rack中间件获得更多的输出，这样我就可以看到发生了什么？提前致谢。 最佳答案

  4. ruby - 当 attr_accessor 在类方法中时会发生什么？ - 2

    所以我想到了这个，想知道当下面的一些事情完成后会发生什么。classTestdefself.abcattr_accessor:Johnendendobject=Test.newputs"beforecallingclassmethodabc:#{object.class.instance_methods(false)}"Test.abcputs"aftercallingclassmethodabc:#{object.class.instance_methods(false)}"这里我检查的是，getter和setter方法是否以这种方式创建。如果是这样，是那些实例方法或类方法。首先我创

  5. ruby - 当你有一个没有参数的 case 语句并且 when 子句是 lambda 时会发生什么？ - 2

    这段代码没有像我预期的那样执行:casewhen->{false}then"why?"else"ThisiswhatIexpect"end#=>"why?"这也不是casewhen->(x){false}then"why?"else"ThisiswhatIexpect"end#=>"why?"第一个then子句在两种情况下都被执行，这意味着我提供给when子句的lambda没有被调用。我知道无论when子句的主题是什么，都应该调用大小写相等运算符===。我想知道当没有为case提供参数时，===的另一边会发生什么。我在想它可能是nil，但它不可能是:->{false}===nil#=>

  6. ruby-on-rails - 获取最近发生的星期三？ - 2

    如何使用Ruby(和Rails，如果有相关的辅助方法)获取最近发生的星期三？最终需要实际日期(5/1/2013)。 最佳答案 time=Time.nowdays_to_go_back=(time.wday+4)%7last_wed=days_to_go_back.days.ago 关于ruby-on-rails-获取最近发生的星期三？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions

  7. ruby-on-rails - 在所有页面上使用 Prawn 的背景图像 - 2

    我在View中有这段代码prawn_document(:page_size=>"A4",:top_margin=>80,:bottom_margin=>40,:background=>"public/uploads/1.png")do|pdf|creation_date=Time.now.strftime('%d-%m-%Y')posts=@posts.eachdo|post|pdf.pad(10)dopdf.textpost.titlepdf.textpost.textendendpdf.page_count.timesdo|i|pdf.go_to_page(i+1)pdf.draw

  8. ruby-on-rails - 发生异常时发送电子邮件不起作用，使用 exception_notification - 2

    我正在从rails2.3迁移到rails3.1，我试图在生成异常时发送电子邮件。我正在使用exception_notificationgem。我的其余电子邮件都在工作。但是异常邮件不会被解雇。以下是我的staging.rb文件中的设置。config.action_mailer.perform_deliveries=trueconfig.action_mailer.raise_delivery_errors=true下面是application.rb中的代码C::Application.config.middleware.useExceptionNotification::Rack,:e

  9. 一个非常明显的现象，正在发生——元宇宙正在被越来越多的人所推崇 - 2

    　　一个非常明显的现象，正在发生——元宇宙正在被越来越多的人所推崇，无论是科技巨头，还是资本巨头，几乎都是如此。同时，区块链则正在一点一点地回归理性与客观。对于区块链来讲，这是一个好现象。它告诉我们，人们对于区块链的狂热而激进的认识，正在被一步又一步的校正和纠偏。由此，区块链行业的发展，将会真正进入到一个全新的发展阶段。　　同以往人们仅仅只是将区块链看成是一个概念，并以此来获取资本和流量不同。当人们对于区块链的认识变得深入，资本和流量反倒不再是区块链玩家们真正关心的问题。至少从当下情况来看，那些依然还在区块链行业里坚守的玩家们，更多地在坚持长期主义，更多地在寻求区块链与行业结合的正确的方式和方

  10. ruby - 256 种颜色，前景和背景 - 2

    这是两个脚本的故事，与previousquestion有关.这两个脚本位于http://gist.github.com/50692.ansi.rb脚本在所有256种背景颜色上显示所有256种颜色。ncurses.rb脚本显示所有256种前景颜色，但背景显示基本的16种颜色，然后似乎循环显示各种属性，如闪烁和反向视频。那么是什么给了？这是ncurses中的错误，它使用带符号的整数来表示颜色对吗？(即'tputcolors'表示256但'tputpairs'表示32767而不是65536)似乎如果是这种情况，颜色对的前半部分会正确显示但后半部分会重复或进入属性作为int包裹。

随机推荐