CODEWITHSUNDEEP
jqueryjquery-ui
Broken Link
Broken Link

Reputation: 2440

Jquery dialog box - doesn't fade out before closing

I have div(box) on my page and I'm using this script to display div as dialog box. Inside that div I have a hyper link, On click of the hyper link I want to fade out the dialog box and close.. The content of the dialog fades out, but the border of the dialog box remains same. If I add $("#box").dialog('close') to the click function after fadeto there is no effect.. it just closes the dialog box completely. Any help? using jquery-ui-1.7.2

<script type="text/javascript">
            $(document).ready(function(){
                 $("a#later").click(function () { 

                $("#box").fadeTo('slow', 0);
                 })
             });
            $(function () {
                $("#box").dialog({
                    autoOpen: true,
                    width: 500,
                    modal: true,

                });
            });
</script>

Upvotes: 7

Views: 8716

Answers (5)

Andrzej Proniewicz
Andrzej Proniewicz

Reputation: 11

this is my code:

$(function() {
$( "a#link-id" ).click(function(){$(".ui-dialog").fadeOut(2000)})});

this is working script :). You don't need to click on 'close' button.

Upvotes: 1

user1142779
user1142779

Reputation: 21

I try the code of some Richard below and it works. You can provide the effect name as a string:

$("#dialog").dialog({
  hide: "fadeOut"
});

or you can provide a hash if you have additional options, such as:

$("#dialog").dialog({
  hide: {effect: "fadeOut", duration: 5000}
});

Upvotes: 2

Giorgi
Giorgi

Reputation: 30873

Try this:

            $(function () {
                $("#box").dialog({
                    autoOpen: true,
                    width: 500,
                    modal: true,
                    show: 'blind',
                    hide: 'fade'
                });
            });

Check out the example here: Animated Dialog

Upvotes: 1

Kathy Van Stone
Kathy Van Stone

Reputation: 26271

How about 

$("#box").fadeTo('slow', 0, function() {
  $("#box").dialog('close');
});

You want the close to happen after the fade finishes, correct?

Upvotes: 17

Germ&#225;n Rodr&#237;guez
Germ&#225;n Rodr&#237;guez

Reputation: 4288

try this, it might work:

$("a#later").click(function () {
   $("#box").fadeTo('slow', function() {
       $("#box").dialog("close")
   });
});

Upvotes: 3

Related Questions