View source for Creating a modal form field

== Override getInput() method ==
Next, we'll override the [http://docs.joomla.org/JFormField::getInput/1.6 getInput method] of the parent class.  This method builds the HTML for the input field.
<source lang="php">
  /**
   * Method to get the field input markup
   */
  protected function getInput()
  {
	  // Load modal behavior
	  JHtml::_('behavior.modal', 'a.modal');
	  
	  // Build the script
	  $script = array();
	  $script[] = '    function jSelectBook_'.$this->id.'(id, title, object) {';
	  $script[] = '        document.id("'.$this->id.'_id").value = id;';
	  $script[] = '        document.id("'.$this->id.'_name").value = title;';
	  $script[] = '        SqueezeBox.close();';
	  $script[] = '    }';
	  
	  // Add to document head
	  JFactory::getDocument()->addScriptDeclaration(implode("\n", $script));
	  
	  // Setup variables for display
	  $html = array();
	  $link = 'index.php?option=com_library&amp;view=books&amp;layout=modal'.
                  '&amp;tmpl=component&amp;function=jSelectBook_'.$this->id;
	  
	  $db = JFactory::getDbo();
	  $query = $db->getQuery(true);
	  $query->select('title');
	  $query->from('#__books');
	  $query->where('id='.(int)$this->value);
	  $db->setQuery($query);
	  if (!$title = $db->loadResult()) {
		  JError::raiseWarning(500, $db->getErrorMsg());
	  }
	  if (empty($title)) {
		  $title = JText::_('COM_LIBRARY_FIELD_SELECT_BOOK');
	  }
	  $title = htmlspecialchars($title, ENT_QUOTES, 'UTF-8');
	  
	  // The current book input field
	  $html[] = '<div class="fltlft">';
	  $html[] = '  <input type="text" id="'.$this->id.'_name" value="'.$title.'" disabled="disabled" size="35" />';
	  $html[] = '</div>';
	  
	  // The book select button
	  $html[] = '<div class="button2-left">';
	  $html[] = '  <div class="blank">';
	  $html[] = '    <a class="modal" title="'.JText::_('COM_LIBRARY_SELECT_BOOK_TITLE').'" href="'.$link.
                         '" rel="{handler: \'iframe\', size: {x:800, y:450}}">'.
                         JText::_('COM_LIBRARY_BUTTON_SELECT_BOOK').'</a>';
	  $html[] = '  </div>';
	  $html[] = '</div>';
	  
	  // The active book id field
	  if (0 == (int)$this->value) {
		  $value = '';
	  } else {
		  $value = (int)$this->value;
	  }
	  
	  // class='required' for client side validation
	  $class = '';
	  if ($this->required) {
		  $class = ' class="required modal-value"';
	  }
	  
	  $html[] = '<input type="hidden" id="'.$this->id.'_id"'.$class.' name="'.$this->name.'" value="'.$value.'" />';
	  
	  return implode("\n", $html);
  }
</source>
Let's take a closer look at the method.   
* The modal behavior is loaded.
* The javascript function SelectBook_jform_request_id is defined and will be inserted into the <head> of the document with addScriptDeclaration().  Notice that $this->id = jform_request_id.  'jform' is the form name given in the loadForm method in our model.  'request' reflects that this is a request field, and 'id' is the name of our field.
* There are several important points in the link that is created to open the modal window.  We include '''layout=modal''', as this will be an alternate list view layout for 'books'.  '''function=jSelectBook_.$this->id''' will be used in the modal layout to identify the function to be called when a book is selected.
* Next, we obtain the title of the currently selected book from the database or return a generic "Select Book" phrase to be shown in the input field.
* The HTML output is created.  Note that this includes the hidden field that will have the id 'jform_request_id_id' and will accept the id value of the book selected in the modal window.