jQuery로 모달 패널 만들기

Question

배경이 어둡게 보이는 패널 (제목 막대가없는 팝업 창이나 크기 조절)을 팝업하고 싶습니다. 어두운 배경을 클릭하면 패널이 닫힙니다.

jQuery UI의 대화 상자처럼이를 수행하기위한 간단한 라이브러리가 있습니까? jQuery UI를 사용하고 싶지만 모달 대화 상자 창에 쉽게 제거 할 수없는 닫기 버튼이있는 제목 표시 줄이 있습니다.

패널이 마우스 커서 옆에 팝업되는 것이 이상적입니다 (브라우저의 경계선에 너무 가까울 경우 적절히 움직입니다).

Answer 1

또한 CSS의 몇 가지로 JQuery와 UI의 대화 제목 표시 줄 (또는 유일한 닫기 버튼)을 제거 할 수 있습니다 당신은 SimpleModal을 보았습니까?

demos 몇 가지를 다운로드하여 기본 또는 학습용으로 사용할 수 있습니다. Google 코드에서 직접 라이브러리 download을 사용할 수도 있습니다.

당신은 JS 파일을 포함하기 만하면, 몇 가지 기본 스타일을 설정합니다 (CSS 또는 옵션)과 멀리 가서 다음과 같이 당신은 당신의 옵션을 포함 할 수 있습니다

$('#some-element').modal(); 

:

$('#some-element').modal({options}); 

Answer 2

저는 정말 JQuery Tools의 overlay dialog을 좋아합니다. here으로 데모 된 대화 상자 뒤의 마스크 옵션이 있습니다.

 
/* Create dialogs without close button */ 
.ui-dialog-no-close-button .ui-dialog-titlebar-close { 
    display: none; 
} 

/* Create dialogs without title bar */ 
.ui-dialog-no-titlebar .ui-dialog-titlebar { 
    display: none; 
} 

그 다음은 dialogClass 속성에 추가 :

 
$("#dialogdiv").dialog({ 
    ... 
    dialogClass: "ui-dialog-no-close-button", 
    ... 
}); 

Answer 3

가지고