Post
Ask Question

Bring jQuery Dialog to Front

Hi, while using jquery modal dialog box sometimes we get an issue that dialog box goes back to the background. Then we can make some changes to resolve the issue. Try any of the following suggestions to resolve the issue.

make sure that jquery-ui.css file is added or not
  1. <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> 
or
 
add the jquery-ui.js file next to the jquery.js file
  1. <script type="text/javascript" src="js/jquery1.11.1-min.js"></script>  
  2. <script type="text/javascript" src="js/jquery-ui.js"></script> 
or
 
add the following style
  1. <style type="text/css">  
  2. .ui-dialog{  
  3. z-index:103;  
  4. }  
  5. .ui-widget-overlay{  
  6. z-index: 102;  
  7. }  
  8. </style> 
or
 
add the following script
  1. $("#mydialog").dialog({ modal: true, autoOpen: false,    
  2. open: function (event, ui) {    
  3. $('.ui-dialog').css('z-index', 103);    
  4. $('.ui-widget-overlay').css('z-index', 102);    
  5. }    
  6. });