Question

The dialog creation is:

$(document).ready(function () {
    $(".jym").dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        closeOnEscape: false,
        height: 100,
        width: 100,            
        open: function () {
            $('.ui-dialog').css("font-size", "14px");              
        },
        show: 'puff'
    });
});

Now the font-size of the dialog window is taking the default font-size of the page which is 17.5px. But if I remove the show then it is taking 14px.

What I am doing wrong?

---

I am using jQuery UI 1.8.18 and jQuery 1.7.1. If I use slide, blind, explode, clip, drop, fade, effect instead of puff then it is working. Also with scale it is not working.

Answer 1

The “puff” effect causes the entire element to “zoom” or “scale” up in size momentarily. I believe what you’re seeing is that the style for the font size is probably being overwritten during the animation. Using .css(‘font-size” … will actually put a style=”font-size:14px” onto the element. The animation uses that same style attribute for it’s animation. So when it finishes the animation, and removes its modified font size, the element will have no font size and inherit that of the page.

Move your font-size 14px into a CSS file instead and your problem will be fixed.