Problem with losing focus of a dialog.

Problem with losing focus of a dialog.

I am trying to develop a test file to use dialog before I incorporate it in an application.
When the dialog is not  visible I want a link to show() and then to hide() when the dialog is visible.
I have tried "blur', " focuslost", "focusout:, and "focus_lost".
I am using FF.
  1. <!doctype html>
    <!--- http://jqueryui.com/dialog/#modal -->
    <html lang="en">
    <style>
     #dialog{
        border:2px solid #333;
        background:#f7f5d1;
        padding:1em 2em;
        color:red;
        text-align: left;
        }   
    </style>
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Basic modal</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


















  2. <script>
    $(function() {
        $( "#dialog" ).dialog({
        modal: true
    });  
    $('#button').hide();
    });  

    $('#dialog')focusout(function() {
      $('#button').show();
    });
    </script>
     
    </head>

    <body>
    <div id="dialog" align="center" text-align="left" contextmenu="">
    <?php
        $company = 'ATMOS';   
        $userid  = 'user';
        $password = 'passw';
        $phone = ' (888) 286 6700 ';
        $account = '80-0018-48484902-6';
    ?> 
    <?php
     echo 'Company: ' . $company .'<br> User Id:  ' . $userid .'<br>Password:  '. $password .'<br> Customer Service: '.$phone . '<br> Acct: '. $account;
    ?>
    </div>
     
    <p> <a href="dialog.php"  id="button" /a>Refresh </p>
    </body>
    </html>