Failed to set active jqueryUI dialog close button

Question

I want to set the active state of the close button (in the header) in the jqueryUI dialog box. I developed its normal state and: the state of freezing. But an active state never works.

Is there something in the plugin that prevents the active state in the button closing link from working? Could this be changed to make it work?

Here is an example of a problem: Show an example

Answer 1

This is a consequence of disabling the selection for the TitleBar of a dialog widget in a browser that does not support the selectteart event. For this browser, they disable the "mousedown" event.

line 145: jquery.ui.dialog.js

uiDialogTitlebar.find( "*" ).add( uiDialogTitlebar ).disableSelection(); 

line 120: jquery.ui.core.js

  disableSelection: function() { return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) + ".ui-disableSelection", function( event ) { event.preventDefault(); }); }, enableSelection: function() { return this.unbind( ".ui-disableSelection" ); } 

so you can use enableSelection () or untie it yourself

Answer 2

State :active only starts when clicked. At this point, your dialogue will close immediately, so I doubt that you can see that this state. Can you give an example if this does not answer your question?

Answer 3

Given @Bizniztime's comments, why not do it in javascript?

 $(".ui-dialog-titlebar-close").mousedown(function() { $(this).css("background", "#000"); }).mouseover(function() { $(this).css("background", "#0F0"); }).mouseout(function() { $(this).css("background", "#F00"); }); 

You can also add / remove classes ...