Recently I came across some crazy behavior on my jquery dialog popup. What happen was all my css “:hover” effects started going crazy. The behavior was when I hover over the button or text (which has :hover class), it started changing back and forth, hover <-> normal mode continuously as the mouse pointer moves over the control. But the same controls works fine when get displayed on the page directly. This issue is only occurring when displayed on the popup. And it affected to all browsers (FF, Chrome, Safari, IE9), some in different ways (IE: it was hiding the popup content when hover).

I went through the internet over this problem, but the solutions suggested didn’t work for me. Some of them are listed here in case for someone to be useful.

1. Add the “position” attribute as “relative”

2. Add the “background” attribute as a transparent repeated image or rgba(0,0,0,0)

None of the above worked for me. Although…

The Solution that worked for me

The body content for the popup was wrapped by a div element. Which have the “display” style attribute as “inline”. I changed it to “inline-block”, and yee…haaaaa… it started working.

Also note I have used “:hover” class in different elements(div, label, input) other than a “link/anchor”. Sometimes it may be related, but I don’t have any idea what went wrong with the use of “display” property to behave in such a crazy way. But I am relieved now.

Hope this will help someone.

Also let me tell you some trick I used to keep maintaining the height of the popup. If you popup does not have dynamic content, then its not your concern. But mine had some controls that needs to be displayed dynamically.

var dialogOpts = {
            title: title,
            modal: true,
            autoOpen: false,
            minHeight: 100,
            width: w,
            height: h,
            position: “center”,
            resizable: false,
            open: function () {
                $(“#popupA”).css(“display”, “block”);
                $(“#popupA”).bind(‘contentchange’, function () {
                    var h1 = 0;
                    $(“#popupA”).children().each(function () {
                        h1 = h1 + $(this).height();
                        //console.log($(this).height());
                    });
                    if (h1 > 0) {
                        $(“#popupA”).height(h1 + 18);
                        //console.log(‘height changed’, h1);
                    }
                });
                var h2 = 0;
                $(“#popupA”).children().each(function () {
                    h2 = h2 + $(this).height();
                    //console.log($(this).height());
                });
                if (h2 > 0) {
                    $(“#popupA”).height(h2 + 18);
                    //console.log(‘height changed’, h2);
                }
            },
            close: function () {
                $(“#popupA”).css(“display”, “none”);
                $(“#popupA”).unbind(‘contentchange’);
                $(“#popupA”).remove();
                if (closeEvent != null) closeEvent();
            },
            focus: function () {
                //console.log(‘popup focused!’);
            }
};
$(“#popupA”).dialog(dialogOpts).dialog(“open”);

“h2” – at the “open” event I sum-up all the immediate child controls’ height
“h1” – Then I use another event called “contentchange”, this event is triggered as you change the content/layout of the popup.

You can find the api documentation and demos here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s