Javascript Infrastics WebDialogWindow关闭时淡出

我正在为一个程序创建一个对话框窗口。它将是一个简单的弹出窗口，可以显示我们传递的任何消息，以及成功或错误的图像

我只需将CSS类“FadeIn3”添加到窗口本身，就可以使WebDialogWindow淡入。（代码如下）窗口淡入视野，效果非常好。我在窗口中有一个按钮，它将调用Javascript函数来关闭窗口。当点击时，我想让窗口在1或2秒内消失，而不是立即消失。有人知道我怎样才能做到这一点吗

WebDialogWindow

<ig:WebDialogWindow ID="dialogMessage" runat="server" WindowState="Hidden" 
Width="300px" Height="150px" Modal="true" InitialLocation="Centered" 
CssClass="fadeIn3" StyleSetName="Default">

    ...

    <asp:Button ID="btnCloseWindow" runat="server" Text="Close" OnClientClick="return hideWindow();" />
</ig:WebDialogWindow>

...

CSS

.fadeIn3 {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 3s; /* Firefox < 16 */
     -o-animation: fadein 3s; /* Opera < 12.1 */
        animation: fadein 3s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fadeIn3{
-webkit动画：fadein 3s；/*Safari、Chrome和Opera>12.1*/
-moz动画：fadein 3s；/*Firefox<16*/
-o-动画：fadein 3s；/*Opera<12.1*/
动画：Fadein3s；
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}
/*Firefox<16*/
@-moz关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
/*Safari、Chrome和Opera>12.1*/
@-webkit关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
/*歌剧<12.1*/
@-o-关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}

Javascript

function hideWindow() {
    oDialog1 = $find('<%= dialogMessage.ClientID %>');

    //I think I need something here to add a "fadeOut" CSS class to the window
    // that would cause it to fade out.  If I add it directly to the
    // CSSClass property then the window fades in, fades out, then appears
    // until the close button is clicked, at which point it instantly disappears.

    oDialog1.set_windowState($IG.DialogWindowState.Hidden);

    return false;
}

函数hideWindow（）{
oDialog1=$find（“”）；
//我想我需要一些东西在这里添加一个“淡出”CSS类的窗口
//这会导致它淡出。如果我直接将它添加到
//CSSClass属性，然后窗口淡入淡出，然后出现
//直到单击“关闭”按钮，该按钮立即消失。
oDialog1.set_windowState（$IG.DialogWindowState.Hidden）；
返回false；
}

您认为jQuery的“淡出”方法可以帮您完成这项工作吗？ 它看起来像这样：

 <script type="text/javascript">
    function complete() {
        oDialog1 = $find('<%= dialogMessage.ClientID %>');
        oDialog1.set_windowState($IG.DialogWindowState.Hidden);
        return false;
    }

    function hideWindow() {
        $("#dialogMessage").fadeOut(2000, complete);
        return false;

    }
</script>

函数完成（）{
oDialog1=$find（“”）；
oDialog1.set_windowState（$IG.DialogWindowState.Hidden）；
返回false；
}
函数hideWindow（）{
$（“#dialogMessage”）。淡出（2000年，完成）；
返回false；
}

可以在第一个参数中设置动画的持续时间（在示例中为-2秒）。

---

我刚刚制作了两个fadeInOut CSS类，一个3秒，一个5秒。然后我将该类应用于对话框窗口，并以相同的秒数调用名为timedHide（）的函数。该函数将等待数秒，然后在fadeInOut脚本完成的同时调用原始的hideWindow（）函数

CSS

Javascript

function timedHide(numSeconds) {
    var timeout = 1000 * numSeconds;

    setTimeout("hideWindow()", timeout);
}

function timedHide(numSeconds) {
    var timeout = 1000 * numSeconds;

    setTimeout("hideWindow()", timeout);
}