jQuery- 오버레이에 div를 어떻게 배치합니까?

Question

내 프로젝트에 이미 너무 많은 jQuery가 들어간 것이기 때문에 가능한 한 최소한의 jQuery 코드로 모달 대화 상자를 만들려고 노력하고 있습니다.

그래서 먼저 오버레이가 필요했습니다.

$('body').wrapInner('<div />')
.css('opacity','0.5')
.css('z-index','2')
.attr('id','dim1');

이 모달이 존재하는 동안 #Dim1의 클릭 이벤트를 죽이는 또 다른 루틴이 있으므로 지금은 무시하십시오. 이제 모달 대화 상자를 맨 위에 그려야합니다.

$('body').append('<div id="test">My Test</div>');
$('#test')
.css('opacity','1.0')
.css('position','fixed')
.css('color','#000')
.css('z-index','2000')
.css('height','300px')
.css('width','300px')
.css('top','50%')
.css('left','50%');

그러나, 내가이 일을 할 때, 나는 희미한 #test로 끝납니다. 그 뒤에있는 것들만이 어두워지고 싶지 않을 때. 트릭은 무엇입니까?

Answer 1

이것을 빨리보십시오 데모 여기서, 핵심은 모달이 불투명 한 배경의 맨 위에 절대적으로 존재합니다. 데모는 배경 오버레이 DIV와 모달 디를 신체에 동적으로 추가하지만 HTML에서이를 정의하고 표시 할 수 있습니다.

모달 효과를 위해 플러그인을 사용할 필요가 없다는 데 동의합니다. 대부분의 플러그인에는 많은 옵션이 제공되므로 가장 간단한 효과 만 필요할 경우 원하지 않는 부풀어 오릅니다. - 우리는 플러그인없이 3 라인 으로이 작업을 수행 할 수 있습니다 !!

또한 CSS 클래스를 정의하고 스크립트의 요소에 인라인 스타일을 추가하는 대신 추가하는 것이 훨씬 쉽습니다. 유지하기가 더 쉽습니다.

Answer 2

최상의 솔루션은 jQuery 플러그인을 사용하는 것입니다. 빠른 Google 검색이 다음을 던졌습니다. http://www.ericmmartin.com/simplemodal/ 3 줄로 필요한 일을하고 있습니다!

좀 더 원한다면 부하가 있습니다. jQuery Ordays 플러그인 페이지

그것의 모습에서, CSS는 일을 올바르게 얻는 열쇠이며, 이러한 예의 대부분은 데모 CSS와 함께 제공되어야합니다.

분명히 이것은 당신이 걱정하는 더 많은 외부 jQuery 코드를 가져옵니다. 그러나 잘 쓰여진 안정적인 플러그인은 많은 작업/시간/코드 줄을 절약 할 것을 제안합니다!