jquery - 关闭对话框时的效果

Question

我正在使用Jquery Dialog盒子。在这个我有提交和关闭按钮。我想为关闭按钮放置像这里这样的 UI 效果。

我的Dialog box代码如下，

$(document).ready(function() {
    $("#disableDivForm").dialog({
        autoOpen: true,
        position: 'center',
        height: 187,
        width: 472,
        modal: true,
        show: {
            effect: 'explode',
            duration: 400
        }
    });
    $('#body').show();
});​

里面有一个关闭按钮disableDivForm。代码如下，

<div id="disableDivForm" name="disableDivForm">
    <input type="submit" id="cancelID" value="Close" onClick="return cancel()" class="but-bl2"/>
</div>

function cancel()
{
    document.disableForm.action=" - myAction goes here - "; 
    document.disableForm.method="POST";
    document.disableForm.submit(); 
}

我尝试了下面的代码来实现效果。

$(document).ready(function(){
    $("#cancelID").click(function(){
       hide: {effect: 'explode', duration: 400}
    });
});

但是，它不起作用。我的对话框本身没有打开。没有 Java 脚本错误。我已经在里面放置了 .click 函数的代码<div id="disableDivForm">

Answer 1

check this fiddle out jsfiddle , might be what you want. you can add hide effect in during initializing of dialog box

  $("#disableDivForm").dialog({
    autoOpen: true,
    position: 'center',
    height: 187,
    width: 472,
    modal: true,
    show: {
        effect: 'explode',
        duration: 400
    },
    hide: {
        effect: 'explode',
        duration: 400
    }
});