3

概要

実行できる不透明度が約 .75 の jQuery UI ダイアログを表示したいと考えています。

ただし、不透明度は.ui-dialog-contentクラスとダイアログ全体にも渡されます。

ダイアログの不透明度を、ダイアログのコアとそのコンテンツから独立して操作したいので、タイトルバーとコンテンツ自体です。

ダイアログは、ユーザーが.75の不透明度で部分的に表示できるようにしたい写真を含む背景の上に表示されます。ただし、ダイアログのコンテンツ内のテキストは、不透明度が .75 になると読みにくくなり、デフォルトの色が黒ではなくグレーのようになります。

すでに実行された検索

複数のキーワードで調査して、目的の結果を達成する方法を見つけようとしましたが、そのたびに、ダイアログを表していないモーダル ダイアログのオーバーレイに関する情報が見つかりました。

これまでに見つかった結果は次のとおりです。

  1. jQuery: モーダル ダイアログ オーバーレイの色を設定する
  2. Jquery UI ダイアログの暗い背景
  3. jquery-ui-dialog.css (ソース)
  4. jqueryのブランクアウト/ダイアログボックスが表示されているページをグレーアウト
  5. jQuery UIダイアログの背景色を変更するには?

ダイアログの背景色の変更については、できました。余談ですが、透明な背景で作業するときは、ほとんど目的を達成できます。しかし、私のサイトの背景にある画像のために、いくつかのフレーズがたまたま読みにくいところにあります。次に、透明な背景ではなく、不透明度によって得られる透明な白い背景が必要です。しかし、.75、.dialogまたは.ui-dialogクラスの不透明度に設定すると、すべてが灰色がかってしまいます。これはまさに私が達成したくないことです。

CSS

.dialog {
    box-shadow: 0 4px 4px 0 #888;
}

.dialog .ui-dialog-titlebar {
    background: rgb(74, 159, 63);
    color: white;
}

.ui-dialog {
    border: 1px solid rgb(74, 159, 63);
    border-bottom: 0px;
    color: #333;
    font: 18px/120% Arial, Helvetica, sans-serif;
    opacity: .75;
}

.ui-dialog-content {
    opacity: 100;
}

Javascript

$(document).ready(function() {
var corporationKey = 0;
var servicesKey = 1;
var fadeEffectDuration = 500;
var dialogWidth = 1000;

var dialogs = new Array("#CorporationDialog", "#ServicesDialog");

$(dialogs[corporationKey]).dialog({
    autoOpen: false,
    closeOnEscape: true,
    dialogClass: 'dialog',
    hide: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    resizable: true,
    show: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    width: dialogWidth
});

$(dialogs[servicesKey]).dialog({
    autoOpen: false,
    closeOnEscape: true,
    dialogClass: 'dialog',
    hide: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    resizable: true,
    show: {
        effect: "fade",
        duration: fadeEffectDuration
    },
    width: dialogWidth
});

// Opens the Enterprise dialog
$("#CorporationMenu").click(function() { 
    closePreviouslyOpenedDialogs(dialogs);
    openDialog(dialogs[corporationKey]);
    return false; 
});
// Opens the Services dialog
$("#ServicesMenu").click(function() {
    closePreviouslyOpenedDialogs(dialogs);
    openDialog(dialogs[servicesKey]);
    return false;
});

$("#accordion").accordion({ active: false, collapsible: true, heightStyle: "content" });
});

function closePreviouslyOpenedDialogs(dialogs) {
for (var i=0;i<dialogs.length;i++) {
    closeDialog(dialogs[i]);
}
}

function closeDialog(key) {
    $(key).dialog( "close" );
}

function openDialog(key) {
    $(key).dialog( "open" );
}

HTMLサンプル

<div id="CorporationDialog" title="Entreprise">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

質問

ダイアログの不透明度が .75 に設定されると、ダイアログのテキストが灰色がかったように見えるのを防ぐ方法はありますか?

ありがとうございます！

ソリューション編集

Richard A.の回答によると、見つかった解決策は次のとおりです。

フォトショップ

  1. Photoshop または同等のツールを使用して、背景が透明な新しい画像を作成します。
  2. Photoshop で新しいレイヤーを追加し、Pain Bucket で白く塗りつぶします。
  3. レイヤーのすぐ上にある不透明度の設定を下にスライドすると、塗りつぶしで遊ぶこともできます
  4. Web およびデバイス用として画像を保存します。
  5. このダイアログ内で、デフォルトの GIF の代わりに PNG-24 を選択します
  6. [透明度] チェックボックスがオンになっていることを確認して保存します。

CSS

.ui-dialog {
    background-image: url('path/to/my/dialog-background-translucent.png') !important;
    background-repeat: repeat;
    background: transparent;
    /* Other settings here*/
}

!importantbackground-image プロパティに使用されているキーワードに注意してください。それがすべての違いを生むものです！

ほら！

4

2 に答える 2

0

実際、私はこれが機能することを発見しました:最初に透明度を宣言し、次に半透明の画像を宣言します

.ui-dialog {
    background: transparent !important;
    background-image: url('path/to/my/dialog-background-translucent.png') !important;
    background-repeat: repeat;
    /* Other settings here */
}

これで背景が半透明になります。

しかし、ポインタをありがとう。

于 2013-11-22T14:42:05.647 に答える