~/Desktop/popup.html.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" /> 
  <meta http-equiv="Content-Style-Type" content="text/css" /> 
  <title>PopUp</title>

<style type='text/css'>
        #pop {
                border:                 1px solid #999999;
                width:                  auto;
                height:                 auto;
                padding:                5px;
                background-color:       #EEEEEE;
                position:               absolute;
                display:                none;
        }
</style>

<script type="text/javascript">
//<![CDATA[

var pop = null;

// ポップアップ処理
function popup()
{
        pop = document.getElementById('pop');
        pop.mx                  = 0;
        pop.my                  = 0;
        pop.offset_x            = 0;
        pop.offset_y            = 0;
        pop.style.left          = '10px';
        pop.style.top           = '10px';
        pop.style.display       = 'block';
        pop.style.zIndex        = 100;
        pop.onmousedown         = popMouseDown;
        
        //-------------------------------------
        // IE select の zIndex 問題に対処。
        // IE の場合のみ作成を推奨だけど、今回は全部。
        //-------------------------------------
        // IE 対策チェックボックがチェックされてるか
        if( document.fm.chk.checked )
        {
                // iframe が作成されていればそのまま。
                // 作成されていなければ作成する。
                var iframe = pop.iframe;
                if( !pop.iframe )
                {
                        iframe = document.createElement( "<iframe scrolling='no' frameborder='0'></iframe>" );
                        // 追加
                        window.document.body.appendChild( iframe );
                        
                        pop.iframe = iframe;
                }
                
                // 初期化
                iframe.style.left       = pop.style.left;
                iframe.style.top        = pop.style.top;
                iframe.style.width      = pop.offsetWidth;
                iframe.style.height     = pop.offsetHeight;
                iframe.style.display    = "block";
                iframe.style.position   = "absolute";
                iframe.style.zIndex     = 10;
        }
}

// ポップアップ無効
function popdown()
{
        if( pop )
        {
                pop.style.display = 'none';
                if( pop.iframe )
                {
                        pop.iframe.style.display = 'none';
                }
        }
}

// ポップアップ マウスの位置を設定する
function MousePos( ev )
{
        if( document.all )
        {
                pop.mx = event.x;
                pop.my = event.y;
        }
        else
        {
                pop.mx = ev.pageX;
                pop.my = ev.pageY;
        }
}

// ポップアップ マウスダウン
function popMouseDown( ev )
{
        MousePos( ev );
        
        pop.offset_x = pop.mx - parseInt( pop.style.left );
        pop.offset_y = pop.my - parseInt( pop.style.top );
                
        window.document.onmousemove = popMouseMove;
        window.document.onmouseup = popMouseUp;
}

// ポップアップ マウスアップ時の動作
function popMouseUp()
{
        window.document.onmousemove = null;
        window.document.onmouseup = null;
        return false;
}

// ポップアップ マウス移動時の動作
function popMouseMove( ev )
{
        if( pop )
        {               
                MousePos( ev );
                
                pop.style.left  = ( pop.mx - pop.offset_x ) + "px";
                pop.style.top   = ( pop.my - pop.offset_y ) + "px";
        
                //------------------------------
                // IE 限定
                //------------------------------
                if( pop.iframe )
                {
                        var iframe = pop.iframe;
                        iframe.style.left       = pop.style.left;
                        iframe.style.top        = pop.style.top;
                        iframe.style.width      = pop.offsetWidth;
                        iframe.style.height     = pop.offsetHeight;
                }               
        }
        return false;
}

//]]>
</script>

 </head>
 <body>
 <div id='pop' >
        ポップアップ<br />
        ドラッグ＆ドロップ
 </div>

 <select>
        <option>１番目</option>
        <option>２番目</option>
 </select>
 <br />
 <form name='fm' style='display:inline;'>
IE対策 <input type='checkbox' name='chk' value='iframe' style='display:inline;' />
 </form>
 <br />
 <input type='button' value='PUSH' onclick='popup();' />
 <input type='button' value='CLEAR' onclick='popdown();' />

 </body>
</html>