多くの場合、フロントエンドを行うと、このような小さな機能があります。 。次のシーン、小さなボタンを想定して、クリックしてモジュラーボックスをポップアップします。
それはとても簡単ですが、空白部分をクリックするときは、モーダルボックスを非表示にして、ボタンID：BTN、モーダルボックスID：モデルを追加します
たぶん、私たちの最も簡単なアイデアは、ドキュメントで直接イベントを聴くことです。
ボタンは、監視するポップアップイベントをクリックします。
次のようにコードコードをコピーします。
$（ "#btn"）。
if（e.StopPropagation）{//泡立ちを止める必要があります
e.StopPropagation（）;
} それ以外 {
e.cancelbubble = true;
}
}）
次のようにコードコードをコピーします。
$（docume）.bind（ "click"、function（e）{
if（クリックイベントはモデルにありません）{
隠されたモーダルボックス。
}
}）
一見問題はありませんが、実際には多くの問題があります。そうしないと、ボタンをクリックする必要がありますモーダルフレームにまだ多くの小さなコントロールがある場合、モーダルボックスのクリックを判断することは困難です。
ここでは、最も古典的な方法があると思います。これは簡単ですが、非常に賢いです
まず第一に、インシデントはモーダルフレームのモデルの次のとおりです。
次のようにコードコードをコピーします。
$（ "#modal"）。
if（event && event.stoppropagation）{{
event.stoppropagation（）;
} それ以外 {
event.cancelbubble = true;
}
}）;
モードボックスバブルのクリックを防ぐだけで、
それから：
次のようにコードコードをコピーします。
$（docume）.one（ "click"、function（e）{
var $ target = $（e.currentTarget）;
if（$ target.attr（ "id"）！= "modal"）{{
$（ "#modal"）。
}
}）;
それをして、とても簡単です