1. ホーム
  2. jquery

[解決済み] jQueryです。簡単なオーバーレイを作成するにはどうすればよいですか?

2022-03-15 23:06:53

質問

UIを使わずに、jQueryで本当に基本的なオーバーレイを作成するにはどうすればよいですか?

軽量プラグインとは何ですか?

どのように解決するのですか?

オーバーレイとは、簡単に言えば div のまま 画面上に固定された (スクロールに関係なく)、ある種の不透明性を持っています。

クロスブラウザの不透明度を0.5とした場合のCSSになります。

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

これはあなたのjQueryコードになります(UIは必要ありません)。IDが#overlayの新しい要素を作成するだけです。 DIVの作成と破棄が必要なのはそれだけです。

var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)

について パフォーマンス上の理由 DIVを非表示にして 表示をblockとnoneにする は、必要な場合とそうでない場合があります。

お役に立てれば幸いです。

編集する Vitalyさんのおっしゃる通り、DocTypeを必ず確認してください。彼の発見に対するコメントで詳細を読む...