Hi,

I am trying to use a component as a modal dialog in an existing VF page with JQuery. I am having problems conditionally displaying the dialog and closing it properly again. I have used "rendered" with a boolean to determine whether to display the component, but am having problems when the modal is closed because the boolean is still set to true when the window is closed

Here is the page containing the component:

<apex:page Controller="DemoModalController">
	<apex:form >
		<h1>Demo Modal</h1>
		<p>Now is the time for all good men to come to arms</p>
		
		<apex:pageBlock id="theDialog" >
			<apex:commandButton value="Open Dialog"
		        		     	action="{!openDialog}" 
		            		 	title="Open the modal dialog"
		            		 	rerender="theDialog"/>
		    <br />
			<apex:commandButton value="Show displayDialog Value"
			       		     	action="{!showDisplayDialog}" 
			           		 	title="Show the value of displayDialog"/>

			<apex:outputPanel id="theDialog" rendered="{!displayDialog}" >
				<c:DemoDialog showDialog="{!displayDialog}" />
			</apex:outputPanel>
		</apex:pageBlock>

	</apex:form>

</apex:page>

And the controller

public with sharing class DemoModalController {

	public boolean displayDialog {get; set;}
	
    public DemoModalController()
    {
    	displayDialog = false;
    }
	
    public PageReference openDialog()
    {            		
		displayDialog = true;
	    return null;      
    }

    public PageReference showDisplayDialog()
    {
	    return null;      
    }	
}

And here is the component

<apex:component controller="DemoDialogController">

	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
	<apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />

    <apex:attribute name="showDialog"
    				assignTo="{!displayDialog}"
    				description="Should the dialog be shown?"
                    type="boolean"
                    required="true"/>
                     
    <div id="dialog">
    
        <apex:pageMessages />

		<p>This dialog box has been created using a jQuery visualforce component!</p>
        
		<apex:commandButton value="No Nothing"
		       		     	action="{!doNothing}" 
		           		 	title="Do nothing"/>
		           		 	
		<apex:commandButton value="Close Dialog"
		       		     	action="{!closeDialog}" 
		       		     	onClick="closeTheDialog()"
		           		 	title="Close the modal dialog"/>

    </div>
	    
    <script type="text/javascript">
     
	var $j = jQuery.noConflict();
	    
        $j(document).ready(function(){
            $j("#dialog").dialog(
            {
                title: '<Dialog Title here>',
                width: 700,
                height: 700,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
        }); 
 
        function closeTheDialog()
        {
            $j('#dialog').dialog('close');
        }
            
    </script>

</apex:component>

And the component controller

public with sharing class DemoDialogController {

	public boolean displayDialog;
	
	public boolean getDisplayDialog() {
		return displayDialog;
	}
	
	public void setDisplayDialog(boolean argDisplayDialog) {
		displayDialog = argDisplayDialog;            	
	}	


    public PageReference doNothing()
    {
    	displayDialog = false;
	    return null;  
    }
	    
    public PageReference closeDialog()
    {
    	displayDialog = false;
	    return null;      
    } 
    
}

I think I have 2 ways of trying to solve this problem:

1. FInd another way to conditionally display the modal windor

OR

2. Update the boolean value in the component so that it is recognised by the controller

Any help greatly appreciated.