JQuery Modal Dialog opens with button selected

I have a dialog created like this:

<div id="choose_product" title="Choose a Product" style="display:none;">
    <button id="sel_1">Prod. 1</button>
    <button id="sel_2">Prod. 2</button>


with JS:

            autoOpen: true,
            show: "blind",
            hide: "explode",
            modal: true,
            buttons: {
                Cancel: function(){


When the dialog box opens, the Prod 1 button is selected (highlighted) by default, I don't know why. You can see this on the JSFiddle . When you press RUN, you can see that the button is Prod. 1

selected by default. Does anyone know why this is happening? Is there something I am doing wrong?


** Edit **

In my application, I actually use $('#choose_product').dialog("open");

to open a dialog. if you use $('#choose_product :button').blur();

immediately after this, no buttons will be selected by default. Little work but seems to work.

See the updated fiddle .


source to share

1 answer

My guess is that when you give the type "modal" to the jQuery UI dialog, it will automatically focus the first button. Also, the reason it's not designed correctly is because you haven't added css to your fiddle.

Edit: After looking more closely, I found this question which confirms what I said above.



All Articles