私はブラウザー拡張機能を作成しており、JQueryUI を使用してモーダル ダイアログをポップアップしています。問題は、特定のサイト (espn.com など) も JQueryUI を使用していることです。うまくやって独自の要素をスコープするのではなく、基本的な JQueryUI 要素にスタイルを適用します。厄介な例は次のとおりです。
.ui-widget{
top:50% !important;
}
これは、拡張機能のダイアログが配置できなくなったことを意味します。より具体的なセレクターと独自の !important タグを使用して、他のスタイリングの問題を克服しましたが、これには困惑しています。ダイアログの位置を固定したくありません。ダイアログがドラッグされたときに JQueryUI で位置を計算して更新できるようにしたい、または次のようなことを行います。
$( ".selector" ).dialog( "option", "position", { my: "center", at: "center", of: window });
残念ながら、auto (まったく機能しませんでした) 以外に指定できる唯一の値は固定値です。誰かが私のために CSS トリックを持っていない限り、ドラッグ中に JQ が計算する位置を動的に取得し、重要なタグで存在するものを上書きする必要があると思います。私は何かをする必要があると思う
$(this).css("top", calculatedVal + " !important");
しかし、計算値を取得する方法がわかりません。chrome の開発ツールを開いて .ui-dialog 要素を選択すると、JQ が計算した絶対位置値 (ピクセル単位) を確認でき、ダイアログをつかんで「ドラッグ」すると、それらが変化するのを見ることができます。入手方法がわかりません。簡単なアプローチ
$(this).css("top");
上書きされた値を返します (例: '50%')。これらの動的な位置の値を取得する方法を知っている人はいますか、またはこれにアプローチするより良い方法がありますか?
編集:インターリーブの例を使用せずに、これをできるだけ簡単に言い換えてみます。私自身の JQUI ウィジェットの CSS スタイルは、別のサイトのスタイルシートの影響を受けています。これは、別のサイトの CSS が「.ui-widget」のような幅広い基本的な JQUI クラスで動作しているためです。さらに、彼らは !important タグを使用しています。つまり、(私が思うに) 独自のスタイルを適用できる唯一の方法は、より具体的なクラス定義を使用し、かつ !important タグを使用することです。これは、font-color などの静的な設定がある場合にうまく機能します。
問題は、JQuery で CSS の一部 (位置など) を動的に更新できるようにすることです。サイトの css がウィジェットの位置を静的に設定し、!important を使用してその位置を維持するように強制しているため、JQ の更新は無視されています。動的に更新する必要があるため、独自の css オーバーライドを設定することはできません。可能な解決策は次のとおりです。
- どういうわけか、サイトの css または要素属性から !important タグを削除します。
- 動的に計算された位置を取得し、!important タグを使用して自分で設定します。
ソリューション 2 の補遺: 理想的には、ドラッグ中に JQ が計算する位置を取得します。これを再実装して自分で位置を計算することはあまり魅力的ではありません。
edit 2 この問題は、スタイルをまったくオーバーライドできないことです。より具体的なcssセレクターを使用してそれを行う方法を理解しています。問題は、オーバーライドする適切な値が 1 つもなく、代わりに動的に変化する値がある場合です。常にその値を取得して設定するよりも、これに対処するためのより良い方法があるかどうか疑問に思っています (!important タグを削除するなど)。