jquery UIダイアログ：タイトルバーなしで初期化する方法？

タイトルバーなしでjQuery UIダイアログを開くことは可能ですか？

最善の解決策はオプションを使用することだと思いますdialogClass。

jquery UIドキュメントからの抜粋：

初期化中： $('.selector').dialog({ dialogClass: 'noTitleStuff' });

または、初期化後に必要な場合。：

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

だから私はオプションdialogClass = 'noTitleStuff'とそのようなcssでいくつかのダイアログを作成しました：

.noTitleStuff .ui-dialog-titlebar {display:none}

単純すぎます ！！しかし、以前のid-> classドリルメソッドが機能しなかった理由を考えるのに1日かかりました。実際、.dialog()メソッドを呼び出すと、変換するdivが別のdiv（実際のダイアログdiv）の子になり、おそらくdivの「兄弟」になるtitlebarため、前者から始めて後者を見つけるのは非常に困難です。

タイトルバーを動的に削除するための修正を見つけました。

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

これにより、ダイアログボックスがレンダリングされた後、クラスが 'ui-dialog-titlebar'のすべての要素が削除されます。

CSSで非表示にできると思います。

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

または、次のdialogClassオプションを使用して、これを特定のダイアログに適用できます。

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});

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

「テーマ設定」ダイアログを確認してください。上記の提案はdialogClassオプションを利用していますが、これは新しい方法を支持するための方法であると思われます。

私はこれを自分のプロジェクトで使用しています

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

これは私のために働きました：

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

使ってみてください

$("#mydialog").closest(".ui-dialog-titlebar").hide();

これにより、すべてのダイアログのタイトルが非表示になります

$(".ui-dialog-titlebar").hide();

実際には、ダイアログをwidget直接使用する別の方法があります。

このようにしてダイアログウィジェットを取得できます

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

そして次に

$dlgWidget.find(".ui-dialog-titlebar").hide();

titlebarそのダイアログ内のみを非表示にする

そして、1行のコードで（私は連鎖が好きです）：

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

この方法でダイアログに追加のクラスを追加する必要はありません。直接それに行くだけです。私にとってはうまくいきます。

openイベントを使用し、そこからタイトルバーを非表示にする方が、より効率的で読みやすくなっています。ページグローバルクラス名検索を使用するのは好きではありません。

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

シンプル。

ダイアログの初期化時にdialogClassを使用した後、jqueryを使用してタイトルバーを非表示にすることができます。

初期化中：

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

この方法を使用すると、CSSファイルを変更する必要がなく、これも動的です。

jQueryウィジェットをオーバーライドするのが好きです。

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

タイトルバーを表示するかどうかを設定できます

   $('#mydialog').dialog({
      headerVisible: false // or true
});

複数のダイアログがある場合は、これを使用できます。

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

これが最も簡単な方法であり、特定のダイアログのタイトルバーのみが削除されます。

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

ダイアログのタイトルバーを非表示にしたときに私が発見したことの1つは、表示が何もない場合でも、スクリーンリーダーがそれを取得して読み上げることです。独自のタイトルバーを既に追加している場合は、両方が表示され、混乱を招きます。

私がしたことはを使用してDOMから削除されました$(selector).remove()。これで、スクリーンリーダー（および他のすべての人）は存在しなくなったため、スクリーンリーダーに表示されなくなります。

これを試して

$("#ui-dialog-title-divid").parent().hide();

divid対応するものに置き換えるid

この次のフォームで問題が解決しました。

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});

#basicModal {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

これを行う最もクリーンな方法は、ダイアログウィジェットからタイトルバーコードを除いたもので構成される新しいmyDialogウィジェットを作成することだと思います。タイトルバーコードを削除することは簡単に見えます。

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

これは、ダイアログボックスのタイトルバーを非表示にするのに役立ちました。

$(".ui-dialog-titlebar" ).css("display", "none" );

これは、それを行う方法です。

テーマフォルダーに移動します->ベース-> jquery.ui.dialog.cssを開きます

探す

フォロー

titleBarを表示したくない場合は、次のように単にdisplay：noneを設定します。

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

タイトルも同様。

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

ここで閉じるボタンが表示されます。これを設定しないか、設定することもできます

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

私はたくさんの検索をしましたが、それでも何も考えませんでした。ただし、これはアプリケーション全体に影響を及ぼし、ダイアログのタイトルボタン、閉じるボタンがありませんが、jqueryを使用し、jqueryを介してCSSを追加および設定することで、これを克服することもできます。

これはこれの構文です

$(".specificclass").css({display:normal})

私にとっては、サイズ変更可能なコーナーを使用したかったので、斜めの線を確認しました。使った

$(".ui-resizable-handle").css("opacity","0");

間違った質問にコメントしていることに気づきました。私の同名:(

jQuery UIドキュメントからの解決策を試しましたか？ https://api.jqueryui.com/dialog/#method-open

それがあなたがこのようにすることができると言うように...

CSS：

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

JSの場合：

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

上記の方法で閉じるアイコンのあるバーを削除してから、自分で閉じるアイコンを追加できます。

CSS：

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML：

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

//このdivをコンテンツを保持するdivに追加します

JS：

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

jquery-ui.js（私の場合はjquery-ui-1.10.3.custom.js）に移動して、this._createTitlebar（）;を検索します。コメントしてください。

これで、ダイアログの誰もがヘッダー付きで表示されます。ヘッダーをカスタマイズする場合は、_createTitlebar（）;に移動します。内部のコードを編集します。

沿って