裏紙に書く程度の内容

jQuery UI のダイアログのタイトルバーを消す方法

jQuery UI のダイアログのデザインを修正して、目立ちすぎるタイトルバーを消す方法です。

初期状態

まずは修正前のhtmlとjavascript。

<div id="dialog">
  <p>ダイアログです。</p>
</div>
(function() {
  $(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true,
      height: 500,
      width: 600,
      buttons: {
        'Save': function() {
          return $(this).dialog('close');
        },
        'Cancel': function() {
          return $(this).dialog('close');
        }
      }
    });
    return $("#show-button").bind("click", function() {
      return $("#dialog").dialog("open");
    });
  });

}).call(this);

jquery ui テーマの black-tieをベースにしています。(このテーマにした理由は特にありません)

ベースの見た目はこんな感じ。

dialog-base

タイトルバーの存在感がすごいです。ここからデザインを変更していきます。

タイトルを消す

タイトルバーを消します。

css用のクラスをセット

上記HTMLの#dialog部分はあくまでダイアログの”中身”を書いているにすぎません。

実際にはこの部分がjqueryUIによって作成されるコンテナに乗っかります。

そのコンテナにクラスを指定する場合はjsの初期設定部分を以下のようにします。

$("#dialog").dialog({
  dialogClass: "no-titlebar", // 追記
  autoOpen: false,
  modal: true,
  height: 500,
  width: 600,
  buttons: {
    'Save': function() {
      return $(this).dialog('close');
    },
    'Cancel': function() {
      return $(this).dialog('close');
    }
  }
});

ここではコンテナのクラスをno-titlebarとしました。

タイトルを非表示にする

cssでタイトルを非表示にします。

.no-titlebar {
    .ui-dialog-titlebar {
        display: none;
    }
}

※sassのソースです。

とりあえずこれだけでタイトルバーは消えます。

しかし、この状態だと右上にあった閉じるボタン(×ボタン)も非表示で、タイトルバーをドラッグしてダイアログを移動することもできなくなってしまいます。

ドラッグできるようにタイトルバーを残す

ドラッグでダイアログの移動ができるように、タイトルバーを残すことにします。

CSSを下記のとおり変更します。

.no-titlebar {

    // 追加
    padding: 0;

    .ui-dialog-titlebar {
        //display: none;
        background: none;
        border: none;

        // 追加
        height: 0;
        border-top: 5px solid #000;
        border-radius: 0;
        padding: 0;

        // タイトル文字部非表示
        .ui-dialog-title {
            display: none;
        }

        // ×ボタン非表示
        button {
            display: none;
        }

    }
}

no-title2

タイトルバーを完全に消すのではなく、目立ち過ぎない程度にして残しました。これで上の黒いバーをドラッグしてダイアログを移動できます。

右上の×ボタンを表示する

右上の×ボタンはちょっと厄介です。

もともとあったヘッダ部の×ボタンを残そうとするとややこしい動きになってしまうため、自分で追加したほうが簡単です。

htmlのダイアログ部分は下記のとおり変更します。

<div id="dialog" class="example-dialog">
  <button type="button" role="button" title="Close" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span></button>
  <p>ダイアログです。</p>
</div>

<button>(と<span>)を追加しました。ボタンのスタイルは本来のものをそのまま使います。

続いてCSS。以下を追加します。

.example-dialog {
    .ui-dialog-titlebar-close {
        top: 18px;
    }
    &.ui-dialog-content {
        position: static;
    }
}

設定したui-dialog-titlebar-closeでは元々はtop: 50%;になっているので、右上に表示するために18pxに上書きしました。(適宜好みの高さに調整してください。)

また、ui-dialog-contentposition: relativeになっているので、そのままだと×ボタンのpositionとしての親はダイアログのコンテンツ部です。

この例ではわかりにくいですが、例えばダイアログのコンテンツが縦長でスクロールがある場合、×ボタンも一緒にスクロールしてしまいます。

これを回避するため、ui-dialog-contentpositionstaticに変更しています。

最後にクリック時にダイアログを閉じる動作。

$("#dialog .ui-dialog-titlebar-close").bind("click", function() {
  return $("#dialog").dialog("close");
});

クリックのイベントで閉じればOK.

見た目はこんな感じになりました。

no-title3

シンプルですたいりっしゅになったきがします!

参考(css)

styleはsassで書いてきましたがcssはこんな感じになってます。

.no-titlebar {
  padding: 0;
}
.no-titlebar .ui-dialog-titlebar {
  background: none;
  border: none;
  height: 0;
  border-top: 5px solid #000;
  border-radius: 0;
  padding: 0;
}
.no-titlebar .ui-dialog-titlebar .ui-dialog-title {
  display: none;
}
.no-titlebar .ui-dialog-titlebar button {
  display: none;
}

.example-dialog .ui-dialog-titlebar-close {
  top: 18px;
}
.example-dialog.ui-dialog-content {
  position: static;
}

参考になれば!

Index