[DEMO] ポップアップさせたレイヤー要素をキャンセルするスクリプト [詳細]

ここをクリックするとポップアップメニューが表示されます。

最近では JavaScript によってクリックされたときなどに、サブ情報などがポップアップするものをよく見かけます。
間違えてクリックしてしまったり、やっぱりやめたい、といったとき、そのポップアップされた要素には通常「閉じるボタン」があると思います。
しかし、Windows などの OS では、その要素外をクリックすることで表示されたメニューなどをキャンセルする、というのはよくあります。

これを、サイト上でも実装できればユーザの直感的な操作でキャンセルさせることができ、とても便利ですよね。
しかし、それをいざ実装しようとすると色々と処理をしないといけません。

そこで、この "キャンセルだけ" を行うスクリプトを作ってみました。
動作としては簡単で、画面いっぱいに透明の div 要素を追加し、そこへキャンセル用のアクションを設定します。

まず、今回紹介しているスクリプト本体(coverobject.js)を読み込ませ、以下のように呼び出します。

ここで渡されているのは、キャンセル時に実行させたい関数です。これはキャンセルレイヤーがクリックされたときに動作させたい関数を設定してください。
追加されたレイヤー用の div をクリックすると、自分自身を消す処理のほかに、上で渡された関数を実行します。

またこのスクリプトには追加された div を消すための関数も用意されています。
実行には以下のようにします。

上記の関数を実行すると、キャンセル用のレイヤーのみを消去します。
なにかのアクションを実行させたあと、このレイヤーが残り続けるのを防ぐために使用してください。