jQuery Forum

Hello all.
I have this code in one of my pages:

1. <input type="text" readonly="readonly" id="IpiDerechohabiente"/>
2. <div id="dialogIpi" style="display:none;">
3.       <input type='text' value=''/>
4.       <button type='button' id="getName">search</button>
5.       <div id="ipiContent"></div>
6. </div>
7. 
   
8. <script>        
   
9. $(function () {            
   
10.       $("#dialogIpi").dialog({
11.             modal: true,
12.             autoOpen: false,
    
13.             height: 350,
14.             width: 400,
    
15.             open: function(event, ui) { $(ui).find("input").focus(); },
16.             buttons: { close: function() { $("#dialogIpi").dialog("close"); } }
    
17.       });            
    
18. 
    
19.       $("#IpiDerechohabiente").on("focus", function(){
20.                  $("#dialogIpi").dialog("open");           
    
21.        });                  
    
22. });
23. </script>

All is working when I click in my textbox, modal dialog opens, modal input gets focus and life is wonderful.
But, when I close the modal dialog ( with any, X or 'close' button), modal dialog close, but not the modal overlay layer, making my page shadowed and unusable.
Firebug console doesn't show any errors and I can't figure how it is happening.

Can you give me a helping hand, please?

Thanks a lot in advance.

Regards


Tistklehoff