コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

基本理解4：ポップアップレイヤーとdrag_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:15:23
オリジナル
837 人が閲覧しました

ポップアップ レイヤーは、Web 開発でよく使用されます。私は、Baidu からコピーして貼り付けていました。

ネットワークがなかったある日まで、私はその原理を理解していませんでした。突然思いついたのですが、なぜこんなに簡単なのでしょうか？ コピー＆ペーストするのに時間がかかります。 概要は次のとおりです。

1. 透明度:0.5;filter:alpha( opacity=57)、絶対位置または固定位置、最も幅が広く、最も高い位置、z- インデックスはカバーされたページのコンテンツよりも大きくなります。

2. 絶対位置、より大きな Z インデックスを使用してコンテンツ div を作成し、お気に入りの属性、眩しいボックスシャドウなどを設定します。

3. 簡単に移動できるように 2 つをラップするレイヤーを設定します。追加するだけでなく、ボタンをクリックすると取得して本文に追加されますので、不要な場合は削除してください。以下に示すように:

4. 実際、私が使用しているウェブサイトではドラッグする必要があります。これを初めて見たとき、あなたは、押したときに座標を記録し、ドラッグしたときにリアルタイムに計算してポップアップ ウィンドウの位置を設定することを考えるでしょう。注意すべき点は、Firefox イベントの問題です。 var et =window.event || argument.callee.caller.arguments[0]; 結果は次のとおりです。

関連ラベル：
基础理解4:弹出层和拖动
ソース：php.cn
前の記事：html のドロップダウン ボックスで値を結合する方法 guide_html/css_WEB-ITnose を探している初心者向け。 次の記事：CSS プリプロセッサとポストプロセッサ_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1860
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2028
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1705
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1609
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1622
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート