여러 번, 우리가 프론트 엔드를 할 때, 우리는 그런 작은 기능을 클릭하여 특정 프레임을 팝업 할 수 있습니다. . 다음 장면, 작은 버튼이 있다고 가정하면 클릭하여 모듈 식 상자를 팝업하십시오.
간단하지만 빈 부분을 클릭하고 모달 상자를 숨기고 버튼 ID : BTN, Modal Box ID : Model을 추가하십시오.
아마도 우리의 가장 간단한 아이디어는 문서에서 직접 이벤트를 듣는 것입니다.
버튼 팝 -UP 이벤트를 클릭하여 모니터링합니다.
다음과 같이 코드 코드를 복사하십시오.
$ ( "#btn").
if (E.StopPropagation) {// 버블 링을 중지해야합니다
E.StopPropagation ();
} 또 다른 {
e.cancelbubble = true;
}
})
다음과 같이 코드 코드를 복사하십시오.
$ (docume) .bind ( "클릭", 함수 (e) {
if (클릭 이벤트가 모델에 있지 않음) {
숨겨진 모달 박스;
}
})
처음에는 문제가 없지만 실제로 많은 문제가 있습니다. 그렇지 않으면 버튼을 클릭하고 실제로 위의 두 이벤트를 트리거했습니다 모달 프레임에 여전히 많은 작은 컨트롤이 있으면 모달 박스의 클릭을 판단하기가 어렵습니다.
여기에는 가장 고전적인 방법이 있다고 생각합니다.이 방법은 간단하지만 매우 영리합니다.
우선, 사건은 모달 프레임 모델의 다음과 같습니다.
다음과 같이 코드 코드를 복사하십시오.
$ ( "#Modal").
if (event && event.stopPropagation) {{
event.stopPropagation ();
} 또 다른 {
event.cancelbubble = true;
}
});
모드 박스의 클릭을 방지하기 만하면됩니다.
그 다음에:
다음과 같이 코드 코드를 복사하십시오.
$ (docume) .one ( "클릭", 함수 (e) {
var $ target = $ (e.currentTarget);
if ($ target.attr ( "id")! = "modal") {{
$ ( "#Modal").
}
});
너무 쉬워요