title: Modal Pop Up To Hover Over Parent Page
body: <p>I wonder whether someone could help me please.</p>
  
  <p>I've really got myself in a bit of a pickle with this and I just seem to be going round in circles to find a solution.</p>
  
  <p>I have created <a href="http://www.mapmyfinds.co.uk/development/testdialog.php" rel="nofollow">this</a> modal dialog page to allow users to upload images. I would like to access this through the click of the 'Upload Images' button on <a href="http://www.mapmyfinds.co.uk/development/test.php" rel="nofollow">this</a> page.</p>
  
  <p>The problem I have is two fold, but are linked.</p>
  
  <p>I can't seem to get the modal dialog page to act as a pop dialog hovering over the parent page, instead it opens as another web browser page, and because I'm using two submit buttons, I can't get the 'submit' functionality to work independently i.e. one that submits the form, whilst the other opens up the modal dialog.</p>
  
  <p>I've been working on this for quite some time now, changing the button types, giving specific name to each button and calling that in a Javascript function, but I just can't seem to find the solution.</p>
  
  <p>I just wondered whether someone could perhaps have a look at this please and help me with this problem.</p>
  
  <p>For ease, I've added the code below:</p>
  
  <p><strong>Modal Dialog</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
   &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" 
          type="text/css" media="all" /&gt;  
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;  
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;          
  
    &lt;script type="text/javascript" language="javascript"&gt;
    $(document).ready(function() {
      $("#dialog").dialog();
      modal: true
      //getter 
      var modal = $( ".dialog" ).dialog( "option", "modal" ); 
      //setter 
      $( ".dialog" ).dialog( "option", "modal", true ); 
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="font-size:62.5%;"&gt;
  
  &lt;div id="dialog"&gt;
  &lt;/head&gt;
  &lt;?php
  //define a maxim size for the uploaded images
  //define ("MAX_SIZE","100"); 
  // define the width and height for the thumbnail
  // note that theese dimmensions are considered the maximum dimmension and are not fixed, 
  // because we have to keep the image ratio intact or it will be deformed
  define ("WIDTH","150"); 
  define ("HEIGHT","100"); 
  
  // this is the function that will create the thumbnail image from the uploaded image
  // the resize will be done considering the width and height defined, but without deforming the image
  function make_thumb($img_name,$filename,$new_w,$new_h)
  {
  //get image extension.
  $ext=getExtension($img_name);
  //creates the new image using the appropriate function from gd library
  if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
  $src_img=imagecreatefromjpeg($img_name);
  
  if(!strcmp("png",$ext))
  $src_img=imagecreatefrompng($img_name);
  
  //gets the dimmensions of the image
  $old_x=imageSX($src_img);
  $old_y=imageSY($src_img);
  
  // next we will calculate the new dimmensions for the thumbnail image
  // the next steps will be taken: 
  // 1. calculate the ratio by dividing the old dimmensions with the new ones
  // 2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
  // and the height will be calculated so the image ratio will not change
  // 3. otherwise we will use the height ratio for the image
  // as a result, only one of the dimmensions will be from the fixed ones
  $ratio1=$old_x/$new_w;
  $ratio2=$old_y/$new_h;
  if($ratio1&gt;$ratio2) {
  $thumb_w=$new_w;
  $thumb_h=$old_y/$ratio1;
  }
  else {
  $thumb_h=$new_h;
  $thumb_w=$old_x/$ratio2;
  }
  
  // we create a new image with the new dimmensions
  $dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
  
  // resize the big image to the new created one
  imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y); 
  
  // output the created image to the file. Now we will have the thumbnail into the file named by $filename
  if(!strcmp("png",$ext))
  imagepng($dst_img,$filename); 
  else
  imagejpeg($dst_img,$filename); 
  
  //destroys source and destination images. 
  imagedestroy($dst_img); 
  imagedestroy($src_img); 
  }
  
  // This function reads the extension of the file. 
  // It is used to determine if the file is an image by checking the extension. 
  function getExtension($str) {
  $i = strrpos($str,".");
  if (!$i) { return ""; }
  $l = strlen($str) - $i;
  $ext = substr($str,$i+1,$l);
  return $ext;
  }
  
  // This variable is used as a flag. The value is initialized with 0 (meaning no error found) 
  //and it will be changed to 1 if an error occurs. If the error occures the file will not be uploaded.
  $errors=0;
  // checks if the form has been submitted
  if(isset($_POST['Submit']))
  {
  
  $title = ($_POST['title']); 
  
  if ($title == '') // if title is not set 
  $title = '(No Title Provided)';// use (empty title) string 
  
  //reads the name of the file the user submitted for uploading
  $image=$_FILES['image']['name'];
  // if it is not empty
  if ($image == '')
  {
  echo '&lt;b&gt; Error! &lt;/b&gt; - You &lt;b&gt; must &lt;/b&gt; select a file to upload before selecting the &lt;b&gt; "Upload image" &lt;/b&gt; button. Please try again.';
  $errors=1;
  }
  else
  if ($image) 
  {
  // get the original name of the file from the clients machine
  $filename = stripslashes($_FILES['image']['name']);
  
  // get the extension of the file in a lower case format
  $extension = getExtension($filename);
  $extension = strtolower($extension);
  // if it is not a known extension, we will suppose it is an error, print an error message 
  //and will not upload the file, otherwise we continue
  if (($extension != "jpg") &amp;&amp; ($extension != "jpeg") &amp;&amp; ($extension != "png")) 
  {
  echo '&lt;b&gt; Error! &lt;/b&gt; - The image that you attempted to upload is not in the correct format. The file format &lt;b&gt; must &lt;/b&gt; be one of the following: &lt;b&gt; "jpg", "jpeg" &lt;/b&gt; or &lt;b&gt; "png" &lt;/b&gt;. Please try again.';
  $errors=1;
  }
  else
  {
  // get the size of the image in bytes
  // $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which the uploaded file was stored on the server
  $size=getimagesize($_FILES['image']['tmp_name']);
  $sizekb=filesize($_FILES['image']['tmp_name']);
  
  //compare the size with the maxim size we defined and print error if bigger
  if ($sizekb &gt; 1150000)
  {
  echo '&lt;b&gt; Error! &lt;/b&gt; - The file that you are attempting to upload is greater than the prescribed &lt;b&gt; 1MB &lt;/b&gt; limit. Please try again.';
  $errors=1;
  }
  
  //we will give an unique name, for example the time in unix time format
  $image_name=$title.'.'.$extension;
  //the new name will be containing the full path where will be stored (images folder)
  $newname="images/".$image_name;
  $copied = copy($_FILES['image']['tmp_name'], $newname);
  //we verify if the image has been uploaded, and print error instead
  if (!$copied) 
  {
  echo '&lt;b&gt; Error! &lt;/b&gt; Your file has not been loaded';
  $errors=1;
  }
  else
  {
  // the new thumbnail image will be placed in images/thumbs/ folder
  $thumb_name='images/thumbs/'.$image_name;
  // call the function that will create the thumbnail. The function will get as parameters 
  //the image name, the thumbnail name and the width and height desired for the thumbnail
  $thumb=make_thumb($newname,$thumb_name,WIDTH,HEIGHT);
  }} }}
  
  //If no errors registred, print the success message and show the thumbnail image created
  if(isset($_POST['Submit']) &amp;&amp; !$errors) 
  {
  echo '&lt;br&gt;&lt;b&gt; Success! &lt;/b&gt; - Your image has been uploaded&lt;/br&gt;';
  echo '&lt;img src="'.$thumb_name.'"&gt;';
  }
  
  ?&gt;
  &lt;!-- next comes the form, you must set the enctype to "multipart/form-data" and use an input type "file" --&gt;
  
  &lt;form name="newad" method="post" enctype="multipart/form-data" action=""&gt;
  &lt;table&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="title" &gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input type="file" name="image" &gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;input name="Submit" type="submit" value="Upload image"&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt; 
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Parent Page Form Code</strong></p>
  
  <pre><code>&lt;form name="savemyfindstolocation" id="savemyfindstolocation" method="post" action="testdialog.php"&gt;
              &lt;p&gt;&lt;label&gt;&lt;/label&gt;
              &lt;/p&gt;
              &lt;p align="left"&gt;
                  &lt;input name="userid" type="text" id="userid"/&gt;
                  &lt;input name="locationid" type="text" id="locationid"/&gt;
                  &lt;br /&gt;
              &lt;/p&gt;
              &lt;div&gt;
                  &lt;label&gt;
                      &lt;div align="left"&gt;Click on the map to place the marker for the find that has been made and drag until the precise location has been found. &lt;/div&gt;
            &lt;/div&gt;
                      &lt;p align="left"&gt;&lt;label&gt;Find OSGB36 Latitude Co-ordinate&lt;br /&gt;
                          &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;input name="findosgb36lat" type="text" id="findosgb36lat" size="20" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;&lt;label&gt;Find OSGB36 Longitude Co-ordinate&lt;br /&gt;
                          &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;input name="findosgb36lon" type="text" id="findosgb36lon" size="20" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;&lt;label&gt;Date of Trip&lt;br /&gt;
                          &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;input name="dateoftrip" type="text" id="dateoftrip" size="10" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;&lt;label&gt;Find Category&lt;/label&gt;
                          &lt;label&gt;&lt;br /&gt;
                          &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;?php
                              mysql_connect("host", "user", "password") or die("Connection Failed");
                              mysql_select_db("database")or die("Connection Failed");
                              $query = "SELECT * FROM findcategories";
                              $result = mysql_query($query);
                              ?&gt;
                              &lt;select name="findcategory" id="findcategory"&gt;
                                  &lt;option value=''&gt;Select a Find Category&lt;/option&gt;
                                  &lt;?php
                                  while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
                                  ?&gt;
                                  &lt;option value="&lt;?php echo $line['findcategory'];?&gt;"&gt; &lt;?php echo $line['findcategory'];?&gt; &lt;/option&gt;
                                  &lt;?php
                                  }
                                  ?&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;Find Name&lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;input name="findname" type="text" id="findname" size="35" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt; Find Description&lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;input name="finddescription" type="text" id="finddescription" size="150" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;
                          &lt;label&gt; Detector Used&lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;select id="detectorname" name="detectorname" onchange="getTextList(this)"&gt;
                                  &lt;option value=""&gt;Select a Detector&lt;/option&gt;
                                  &lt;?php
  
                                  // QUERY DATABASE TO GET CATEGORIES
  
                                  $query = mysql_query("SELECT detectorid, detectorname FROM detectors ORDER BY detectorname ASC") or die(mysql_error());
  
                                  // LOOP THROUGH ROWS RETURNED TO CREATE SELECT BOX
  
                                  while($row = mysql_fetch_array($query)) {
  
                                  echo '&lt;option value="'.$row['detectorid'].'"&gt;'.$row['detectorname'].'&lt;/option&gt;';
  
                                  }
  
                                  ?&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;
                          &lt;label&gt;Search Head Used&lt;br /&gt;
                          &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;select id="searchheadname" name="searchheadname"&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                      &lt;p align="left"&gt;
                          &lt;label&gt;Detector Settings&lt;/label&gt;
                          &lt;label&gt;&lt;br /&gt;
                          &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;textarea name="detectorsettings" cols="50" rows="12" id="detectorsettings"&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;
                          &lt;label&gt;PAS Ref. (if known)&lt;br /&gt;
                          &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;input name="pasref" type="text" id="pasref" size="9" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;&lt;label&gt;Additional Comments&lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments"&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/p&gt;
                      &lt;p&gt;
                        &lt;label&gt;
                        &lt;div align="left"&gt;
                          &lt;input name="uploadimages" type="submit" id="uploadimages" value="Upload Image(s)"/&gt;
                        &lt;/div&gt;
                        &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;p align="left"&gt;&lt;label&gt;Do you wish to make this find public?&lt;br /&gt;
                          &lt;/label&gt;
                      &lt;/p&gt;
                      &lt;div&gt;
                          &lt;div align="left"&gt;
                              &lt;?php
                              mysql_connect("host", "user", "password") or die("Connection Failed");
                              mysql_select_db("database")or die("Connection Failed");
                              $query = "SELECT * FROM makepublicoptions";
                              $result = mysql_query($query);
                              ?&gt;
                              &lt;select name="makepublic" id="makepublic"&gt;
                                  &lt;option value=''&gt;Choose 'Yes' or 'No'&lt;/option&gt;
                                  &lt;?php
                                  while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
                                  ?&gt;
                                  &lt;option value="&lt;?php echo $line['publicoption'];?&gt;"&gt; &lt;?php echo $line['publicoption'];?&gt; &lt;/option&gt;
                                  &lt;?php
                                  }
                                  ?&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p align="left"&gt;
                          &lt;input name="submit" type="submit" value="Submit" /&gt;        
      &lt;/form&gt;
  </code></pre>
  
  <p>Sincere thanks and regards</p>