ポップアップの JAVASCRIPT 実装 box_html/css_WEB-ITnose

ポップアップボックスを実装するための Javascript

著者: towaywu

2016-02-19 08:57:50.0

22 ビュー

カテゴリ: プログラミング言語 HTML/CSS/JAVASCRIPT フロント-プログラミングを終了します

今日は、単純なポップアップ ボックスのエフェクトを実装します

まず、単純なポップアップ ボックスのコンポーネントを分析します。ポップアップ ボックスはヘッダー、コンテンツ、末尾に分かれています。 先頭にはタイトルと閉じるボタンがあり、コンテンツにはグラフィック、メディア、iframe、フラッシュなどがあり、末尾にはボタン (確認、キャンセルなど) があります。この例の最後にはボタンを追加しません。この例は主にポップアップ ボックスを実装するためのもので、頭を押すと移動モードがオンになります。実際、この文の意味は比較的単純です。

ここでは、移動の X 座標と Y 座標、および禁止を考えることができます。次に、onmousedown イベントと onmouseup イベントをタイトルに追加します

onmousedown イベントの主な機能は、移動をオフにすることです。ポップアップ ボックスを移動する必要があります。ここでは、本体内で移動する必要があります。そこで、onmousemove イベントを本体に追加します。ポップアップボックスの位置を処理します

これら3つのイベントでは、主にCSSのposition属性とJSのEventイベントの属性の座標が一致します

ポップアップの移動後。ボックスが完成したら、閉じるボタンに閉じるイベントを追加します。

そうですか。同じコードをそれ自体で最適化してカプセル化することができます。また、互換性の問題により、他の機能を追加することもできます。自分で対処してください (IE9 より前のバージョン)

この記事は Wu Tongwei のブログに属します、

WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233

元の記事、転載する場合は出典と対応するリンクを明記してください: http ://www.wutongwei.com/front/infor_showone.tweb?id=205、皆さんも拡散と共有を歓迎します

タグ: JavaScript チュートリアル JavaScript の例

android.jar 依存関係パッケージの解決策。

データはありません

towaywu

テクノロジーが好きな人、起業家への道を歩むiaosi 一緒にコミュニケーションすることを歓迎します

プログラマーの WeChat 公開アカウント:

bianchengデレン

コミュニケーションQQグループ: 186659233