デフォルトではシンプルダイアログはタイトルバーをつかんでドラッグすることができます。ドラッグさせたくない場合にはdraggableオプションでfalseを指定します(サンプル07)。

サンプル07の実行結果

サンプル07

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIシンプルダイアログサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/container.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/dragdrop.js"></script> 
        <script type="text/javascript" src="js/container.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                var dlgObj = new YAHOO.widget.SimpleDialog("dlg", {
                    width : "420px",
                    height : "200px",
                    fixedcenter : true,
                    draggable : false
                }); 
                dlgObj.setHeader("注意");
                dlgObj.setBody("このページにはプログラマ向けの内容が含まれています"); 
                dlgObj.render(document.body);
            }
        // --></script>
    </head>
    <body>
    <h1>YUIシンプルダイアログサンプル(ドラッグを不可にする)</h1>
    </body>
</html>

また、デフォルトではダイアログの外側をクリックすることができますが、modalでtrueを指定するとダイアログの外側はクリックしても反応できないようにすることができます(サンプル08)。

サンプル08の実行結果

サンプル08

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIシンプルダイアログサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/container.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/dragdrop.js"></script> 
        <script type="text/javascript" src="js/container.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                var dlgObj = new YAHOO.widget.SimpleDialog("dlg", {
                    width : "420px",
                    height : "200px",
                    fixedcenter : true,
                    draggable : false,
                    modal : true
                }); 
                dlgObj.setHeader("注意");
                dlgObj.setBody("このページにはプログラマ向けの内容が含まれています"); 
                dlgObj.render(document.body);
            }
        // --></script>
    </head>
    <body>
    <h1>YUIシンプルダイアログサンプル(モーダル)</h1>
    </body>
</html>

ダイアログの枠に影を付けるか、白枠を付けるかはunderlayオプションで指定することができます(サンプル09)。指定できる値は以下の表になります。

underlayオプション

none なし
shadow 影
matte 白枠

サンプル09の実行結果

サンプル09

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIシンプルダイアログサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/container.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/dragdrop.js"></script> 
        <script type="text/javascript" src="js/container.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                var dlgObj = new YAHOO.widget.SimpleDialog("dlg", {
                    width : "420px",
                    height : "200px",
                    fixedcenter : true,
                    draggable : false,
                    modal : true,
                    underlay : "matte"
                }); 
                dlgObj.setHeader("注意");
                dlgObj.setBody("このページにはプログラマ向けの内容が含まれています"); 
                dlgObj.render(document.body);
            }
        // --></script>
    </head>
    <body>
    <h1>YUIシンプルダイアログサンプル(枠指定)</h1>
    </body>
</html>