<div id="addTask" style="display: none" >  

              <apex:outputpanel id="atd">  
              
                  <h2>New Task</h2>
                                    
                    <apex:form >
                            <apex:panelGrid columns="2" width="85%">
    
                                 <apex:outputLabel value="Name"/><apex:inputText value="{!newTask.name}" size="21"   />
                                 <apex:outputLabel value="Description"/><apex:inputField value="{!newTask.Description__c}" />
                                 <apex:outputLabel value="Assign to"/>
                                 <apex:inputField value="{!newTask.Assigned_To__c}" />

                                 
                                  <apex:commandButton action="{!addNewTask}" 
                                               oncomplete="$('#addTask').dialog('close')" value="Create this Task" rerender="recordsection,msgs" /> 
                                  <apex:commandButton value="Cancel" immediate="true" 
                                               oncomplete="$('#addTask').dialog('close')"/>
                             </apex:panelGrid>
                   </apex:form>
               
               </apex:outputpanel> 

       </div> <!-- addTask -->

***

                    <script type="text/javascript">
                    
                           $(function(){      
                  
                                $("#addTask").dialog({
                                    autoOpen: false,
                                    modal: true,
                                    closeable: false,
                                    resizable: false,
                                    width: 600
                                });
                                
                            });
                            
                      </script>

      <div id="addTask" style="display: none" >  

              <apex:outputpanel id="atd">  
              
                  <h2>New Task</h2>
                                    
                    <apex:form >
                            <apex:panelGrid columns="2" width="85%">
    
                                 <apex:outputLabel value="Name"/><apex:inputText value="{!newTask.name}" size="21"   />
                                 <apex:outputLabel value="Description"/><apex:inputField value="{!newTask.Description__c}" />
                                 <apex:outputLabel value="Assign to"/>
                                 <apex:inputField value="{!newTask.Assigned_To__c}" />

                                 
                                  <apex:commandButton action="{!addNewTask}" 
                                               oncomplete="$('#addTask').dialog('close')" value="Create this Task" rerender="recordsection,msgs" /> 
                                  <apex:commandButton value="Cancel" immediate="true" 
                                               oncomplete="$('#addTask').dialog('close')"/>
                             </apex:panelGrid>
                   </apex:form>
               
               </apex:outputpanel> 

       </div> <!-- addTask -->

***

                    <script type="text/javascript">
                    
                           $(function(){      
                  
                                $("#addTask").dialog({
                                    autoOpen: false,
                                    modal: true,
                                    closeable: false,
                                    resizable: false,
                                    width: 600
                                });
                                
                            });
                            
                      </script>

@fractastical jQuery Dialog VF Page

Other