title: Jquery modal dialog that stops in-page action
body: <p>I have reviewed lots of pages about jquery modal dialogs, but still have not found something that works how I need it to.</p>
  
  <p>If a user makes a change and clicks an internal link on our site, I want a dialog to pop up with 3 button options -- Save, Discard, and Cancel.  If they click save, it will call the save function, then leave the page.</p>
  
  <p>But the page is set up with tabs, with each tab loading a different php page into a master page.  The links are not hard links, and they do not reload the page.  They are like in-page anchor links (that then load a php page).  So I cannot capture the anchor request and send it to the address bar later.</p>
  
  <p>I already have the dialog, set as modal.  But right now, when I click another tab, it loads the tab, and pops up my dialog at the same time.  I want it to not load the tab until a button is clicked in the dialog.</p>
  
  <p>The confirm() function does this perfectly.  But my modal dialog allows the other tab to load.  Can you help me set up a modal dialog that works like the confirm function in this instance?</p>
  
  <p>Here is my Javascript function:</p>
  
  <pre><code>        function fw_chkTabStatusFmla() {
          if (jsg_fwTabWatchFmla == false) {
  
             $(function() {
                $( "#tabWarnFmla" ).dialog({
                    resizable: false,
                    height:240,
                    width:400,
                    modal: true,
                    buttons: {
                      Cancel: function() {
                        $( this ).dialog( "close" );
                      },
                      "Discard": function() {
                              $( this ).dialog( "close" );
                             //discard changes and continue
                      },
                      "Save": function() {
                              $( this ).dialog( "close" );
                             //function to save changes and continue
                      },
                    }
                });
            });
        }
   }
  </code></pre>
  
  <p>This is the old one I was using.  It stops the behavior correctly, but only allows for two buttons.</p>
  
  <pre><code>        function fw_chkTabStatusFmla() {
          if (jsg_fwTabWatchFmla == false) {
              var x = confirm("If you leave this tab without saving you may lose your changes.\n\nClick 'OK' to proceed without saving.");
              if (x == true)         {
                  jsg_fwTabWatchFmla = true;
                  setConfirmUnload(false);
                  return true;
              } else {
                  return false;
              }
          }
      }
  </code></pre>
  
  <p>I am setting the jsg_fwTabWatchFmla variable to false when changes are made in the pertinent fields.</p>
  
  <p>Here is what I have to run the function.</p>
  
  <pre><code>    $(document).ready( function() {
              $('#tabs').tabs({
              select: function(event, ui) {                    
                  return fw_chkTabStatusFmla();
              }
              });
      }
  </code></pre>