オーバーレイを表示して、マウスでドラッグ可能なフローティングボックスを画面中央に表示する

動くサンプルはこちら。今回は、以下の2つのサンプルの合体した版を見ていきます。

上記を確認してから、こちらのページをご覧ください。このサンプルでは、(B)の時とは仕様を変え、フローティングボックスは、毎回画面の中央に表示されるようにしてみます。ということで、以下コードです。(HTMLは、動くサンプルでご確認下さい)

変数宣言部分は、win = $(window) 以外は、(A)と(B)の2つの合体分です。関数部分は、moving、dragEnd、mouseDown関数は、(B)と全く同じで、setBoxCenter、hideBox、showBox関数は、新規に加わっています。最後のイベント設定は、少しアレンジしています。ということで、ここでは、新規に加わった関数3つを見て行きます。まず、showBox関数は、「フローティングボックス表示」ボタンを押した時に呼ばれます。オーバーレイを表示し、続けてフローティングボックスを表示し、そして最後に、setBoxCenter関数を呼んでいます。setBoxCenter関数では、フローティングボックスを中央に配置する為の処理をします。画面の高さ(幅)、フローティングボックスの高さ(幅)、スクロールバーの位置を考慮して配置すべき位置を計算して、中央に配置しています。hideBox関数は、閉じるボタンを押した時、又はオーバーレイをクリックした時に呼ばれます。この関数内では、オーバーレイとフローティングボックスを共に消す処理をしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です