CODEWITHSUNDEEP
htmljquerycssjquery-uidialog
Karthik
Karthik

Reputation: 222

When jquery-ui dialog is open, unable to set focus or enter text in a <div> outside the dialog

I have a search box which should be accessible even when the jQuery-ui dialog is open. This was working when I used jQuery-ui 1.11.4 version. After updating it to jQuery 1.13.1 version, I have started to notice this issue.

If I roll back the version upgrade, it works but I want to use the jQuery-ui 1.13.1 version and also have this feature working.

I have tried to play around with CSS but it didn't help.

HTML:

<div class="search-menu">
  <div>Search</div>
  <input type="text" id="searchBox" />
</div>

<div id="myDialog">
    This is the content of my modal dialog box
</div>

<button id="clickMe">Open dialog</button>

Javascript + jQuery:

//Set up the dialog box
$("#myDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box",
    buttons   : {
              'OK' : function() {
                  alert('The OK button was clicked');
              },
              'Close' : function() {
                  alert('The Close button was clicked');
                  $(this).dialog('close');
              }
                }
});

//Open the dialog box when the button is clicked.
$('#clickMe').click(function() {
    $("#myDialog").dialog("open");
});

CSS:

.search-menu {
  position: fixed;
  top: 5px;
  right: 25px;
}

.ui-widget-overlay, .ui-dialog {
  top: 50px;
}

jsfiddle example

Upvotes: 2

Views: 313

Answers (1)

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

You need to add z-index to search box higher than the dialog box

.search-menu {
    z-index: 9999;
}

Upvotes: 1

Related Questions