Jquery popUp

window.showModalDialog or jQuery UI will do just that

I am using jquery UI but the close button does not work

http://jqueryui.com/demos/dialog/#modal-confirmation

I did exaxctly what the example is doing still no luck.

$(document).ready( function() {
             
             
            $("#linkClick").click( function(event){
                  $( "#dialog:ui-dialog" ).dialog( "destroy" );
                  
                  event.preventDefault();
                  $("#content").load('index.html');
            
                  
                  $('#content').dialog({
                         
            resizable: true,
                  
                  modal: true,
                  closeOnEscape:false,
            draggable:true,
            scrollbars:false,
           
                  width: 660,
                  height: 400,
                  position: 'middle',
                         buttons: {
                        "OK": function() {
                                    alert('Hello');
                                $('#content').dialog("close");
                                                //$('#').dialog("close");
                                                $('#content').dialog('destroy')
                                                
                        },
                        "Cancel": function() {
                                $(this).dialog("close");
                        }
                }
            
                        
                  });
                  

                  //alert('Hello');
                  
            return false;      
                  });
            
      });
      

Did you include jquery libraries?

yes. All libraries are there it lanches the box I can even see the alert box after I clicked on the OK , but ca not close it

is that because I am using   event.preventDefault(); but otherwise it will reload the parent form

I would need to see a page

it is on the local machine

<script type="text/javascript">
      $(document).ready( function() {
             
             $('#content').dialog({
            autoOpen: false
        });
            
            $("#linkClick").click( function(event){
                  $( "#dialog:ui-dialog" ).dialog( "destroy" );
                  
                  event.preventDefault();
                  $("#content").load('index2.html');
            
                  
                  $('#content').dialog({
                         
            resizable: true,
                  
                  modal: true,
                  closeOnEscape:false,
            draggable:true,
            scrollbars:false,
           
                  width: 660,
                  height: 400,
                  position: 'middle',
                         buttons: {
                        "OK": function() {
                                    alert('Hello');
                                $(this).dialog("close");
                                                //$('#').dialog("close");
                                                $('#content').dialog('destroy')
                                                
                        },
                        "Cancel": function() {
                                $(this).dialog("close");
                        } ,
                                    //close: function(ev, ui) { $(this).close(); },
                }
            
                        
                  });
                  

                  //alert('Hello');
                  
            return false;      
                  });
            
      });
      
</script>      

<form action="index.html method="post" enctype="application/x-www-form-urlencoded">
<a href="" id="linkClick" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<div id="content" style="display: none;"></div>

</form>

I do not see anything special.
I'll try to do a fiddle tomorrow

OK

I cannot test it in fiddle because I do not have your html file you load
http://jsfiddle.net/mplungjan/wkXEu/

Those html only consists of 3 drop downs

Ok. Got it How can i pass the selected value to the parent screen

There is no parent screen. The popup is IN the parent screen - so where I call alert, just call a function in the page you are in

continueTheProcess(vals);    

how can i pass the ID of the fileds for text and ID back. For example I have 2 links linkClick once I click on each one of them and Click OK on the dialog box I need to return the value and the text. It works Fine If I have only 1 link then i know exactly where to put it. What If I have more than 1 link then i need to dynamically specify the id of 2 elements where I want to store them

Just set two vars AND call a  function or pass { field1:"value",field2:"value2"}

can you give me an example how to do that , I never use this approach. Can it be just a name of div tat I want to write result into ?

is there any update on this issue

"Show all items": function() {
  var result ="";
  $(this).find("select").each(function() {
    result+=$(this).attr("name") + ': '+ $(this).val()+"<br/>";
  });
  $("#resultDiv").html(result);
  $( this ).dialog( "close" );
},

thank you