Home/ Questions/Q 606325
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:14:32+00:00

When a jQuery UI dialog opens, it selects one of the buttons and highlights

  • 0

When a jQuery UI dialog opens, it selects one of the buttons and highlights it or sets focus to it etc… How can I stop this behaviour so that none of the buttons are highlighted when the dialog opens?

EDIT: I tried the following in the dialog options, which didn’t remove focus from the buttons:

...
open:function(event, ui) { $("myunimportantdiv").focus(); },
...

NOTE: As a temporary workaround I modified the CSS for .ui-state-focus but this isn’t ideal…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use the blur method. You can try this sample.

    <html>
    <head>
        <title>No Focus on jQuery Dialog</title>
        <link type="text/css" rel="stylesheet" href="ui.all.css" />
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.dialog.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // Dialog to confirm or cancel
                // Focuses on confirm by default.
                $('#noFocusDialog').dialog({
                    autoOpen: false,
                    buttons: {
                        Confirm: function() {
                            $(this).dialog('close');
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                        }
                    }
                });

                // Trigger to open the dialog
                $('#openNoFocusDialog').click(function() {
                    $('#noFocusDialog').dialog('open');

                    // Remove focus on all buttons within the
                    // div with class ui-dialog
                    $('.ui-dialog :button').blur();
                });
            });
        </script>
    </head>
    <body>
        <a id="openNoFocusDialog" href="#">Open Dialog</a>
        <div id="noFocusDialog">
            <p>Confirm that no elements have focus</p>
        </div>
    </body>
</html>
    • 0