私の Web ポートレットは liferay 環境にデプロイされています。これは、複数の jQuery css テーマがあることを意味します。複数のテーマの問題を解決してきた方法は、ポートレットを独自のクラスでラップし、そのクラスをコンテナーとして jquery-ui css に追加することです (たとえば、 を使用.my-portlet .ui-dialog {})。
ただし、jQuery UI を使用してダイアログを作成すると、ダイアログ コンテナーに class が与えられる.ui-dialogため、テーマは liferay が使用しているテーマのテーマになります。私の解決策は、ダイアログを「my-portlet」のクラスで独自の div にラップすることです。これにより、独自の UI テーマが使用されるようになります。
どうすればこれを行うことができますか？を使用すると、クラスがヘッド コンテナーとして$(#item).dialog()自動的に適用されます。ui-dialogjQuery コードを変更する必要はありません。
別のラッパーに移動する必要がある別のダイアログがない場合は、単に使用できます
$('.ui-dialog').appendTo('#wrapper');
appendToを使用できますが、jquery-ui 1.10.0 以降が必要です
$( ".selector" ).dialog({ appendTo: "#someElem" });
jquery-ui のドキュメントを確認してください。
jQueryUI 1.10 より前では、すべてのダイアログは自動的に<div>コンテナーにラップされ、DOM のbody要素に移動されていました。
DOM の別の場所に配置したい場合は、別の要素内で再親化する必要がありました。問題をさらに複雑にするために、そのdraggableプロパティもリセットする必要があります。
var dlg = $('#item').data('dialog').uiDialog;
$(dlg).appendTo('#newparent');
$(dlg).draggable('option', 'containment', 'parent');
jQuery UI が提供するコンテナーの周りに余分なコンテナー div をラップすることが意図されている場合、このアプローチは役に立たないと思います。
または、ダイアログを作成するときにオプションを使用して、ダイアログ コンテナーに追加のクラスを追加することで解決できる場合があります。dialogClass
このようなことを試してみたらどうですか？
$('#item').dialog().wrapAll('<div class="my-portlet"></div>');