Customizing jQuery UI Dialog: hiding close button and changing opacity

Sometimes when you are programming small things are the hard things, little details becomes difficult to solve and you need to spend lot of time to solve them. This is logically :) because you spent the major part of your time thinking and designing the big or complex things, leaving in a second plane the small things and because this they became the new “big” things. Ok, stop talking with buggy sentences and talk about this post. Recently I was working in a web page using jQuery UI dialogs that have a couple of special requirements that takes me some time and because this I want to share here with you:

  • Some dialogs must not have a close button. There are dialogs that must be always visible floating at some part with some controls.
  • Some dialogs must have a degree of opacity allowing view the underlaying content and becomes more opaque when the cursor enters in the dialog.

Next are samples about how customize minimally the dialog to achieve the previous requirements. You can see them in action in the next sample page.

Creating a default dialog

Create a default jQuery UI dialog is easy, given a ‘div‘ element identified by d1:

Creating a dialog without close button

To creating a dialog without a close button, the key is the ‘open‘ method. We need to reference the ‘.ui-dialog-titlebar-close’ element and hide it:

Creating a dialog that changes opacity

Finally to create a fashion dialog that changes its opacity with the mouse hover event:

Do yo know how to create more stunning dialogs?
Comments are welcome.

Related Posts:

4 Comments

  1. The code to hide the close button is relying on something that one should never ever rely on. The structure of the dialog could change at any time.

    Please make use of context:


    $("#d2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
    // Hide close button
    ui.dialog.find(".ui-dialog-titlebar-close").hide();
    }
    });

    Reply
  2. TeMc: Thanks for this topic, this is what I was looking for (hiding the close button). Your code is working fine.

    asantiago: I understand your concern and I stick to it. However I can’t have your code running, just replacing :

    $(this).parent().children().children(“.ui-dialog-titlebar-close”).hide();

    with

    ui.dialog.find(“.ui-dialog-titlebar-close”).hide();

    Any ideas?

    Reply

Leave a Comment.