jQuery 、jQuery UI の DialogプラグインとDraggableプラグイン を使用して、ダイアログを表示します。

対象プラグインを、下記より入手してください。
* jQuery
* jQuery UI

サンプル

サンプルソース

JavaScript + CSS

<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.core.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.dialog.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/ui.draggable.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.strollnet.com/js/jquery/css/black-tie/jquery-ui-1.7.2.custom.css" />

<script type="text/javascript">
<!--
   $(function() {
      $('#dialog').dialog({
         autoOpen: false,
         width: 600,
         buttons: {
            "OK": function() {
               $(this).dialog("close");
            },
            "Cancel": function() {
               $(this).dialog("close");
            }
         }
      });

      $('#dialog_link').click(function(){
         $('#dialog').dialog('open');
         return false;
      });
   });
//-->
</script>

<style type="text/css">
   #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
   #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style>

HTML

<p>
   <a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
   <span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
</p>

<div id="dialog" title="タイトル">
   <p>本文</p>
</div>