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