jQuery 기반 메시지 프롬프트 플러그인 DivAlert 여정(2)_jquery

개선된 코드 부분은 주로 다음과 같습니다.
1. default.css 파일 생성:
코드

코드 복사 코드는 다음과 같습니다.

img
{
vertical-align:middle;
}
.jBg
{
위치: 절대;
상단: 0 ;
왼쪽: 0;
배경색: #999;
불투명도: 0.7;
}
.jWrap
{
경계: 1px 솔리드 #cef;
오버플로: 숨김; >}
.jTit
{
텍스트 정렬:
배경:#F1F1F1;
패딩:
높이: 20px; 🎜>세로 정렬: 중간;
테두리 하단:1px #DEDEDE;텍스트 들여쓰기:5px;
라인 높이:20px; }
.jCon
{
배경색: #fff;
패딩: 10px 13px;
오버플로:
글꼴 크기: 15px; >.jBtn, jBtn: hover
{
cursor:pointer;
height:17px;
width:17px>}
.jBtn
{
배경: 투명 URL(close.png) 반복 없음;
right:8px;
top:7px
}
.jBtn:hover
배경:투명 URL(닫기 .png) no-repeat -19px 0px;
.jConBottom
{
배경:#F1F1F1
text-align:right
width; :100%;
높이:41px;
위치:절대;
}
.jBtnConfirm
{
배경:url(btn.png) 반복 없음 0 -24px 투명;
커서:포인터
색상:#3F3F3F;
높이:21px;
텍스트 정렬:센터; 글꼴 크기:12px;
float:right;
margin-top:10px;
margin-right:10px;
}


2. 수정 JS 기본 옵션 섹션(css 파일과 협력하도록):




코드 복사


코드는 다음과 같습니다.


options.bgClass = o.bgClass || 'jBg';
options.wrapClass = o.wrapClass || 'jWrap'
options.titClass ||
options.conClass | 'jCon';
options.clsClass || 'jBtn';
options.botDivClass
options.botBtnClass = o.botBtnClass || ' jBotBtn';

3. 이전에는 제목과 콘텐츠에 대해 두 개의 div만 만들었으므로 효과를 얻으려면 두 개의 div를 추가해야 합니다. , 하나는 하단의 큰 div이고 다른 하나는 확인 버튼

코드 복사 코드는 다음과 같습니다.

//하단에 확인 버튼이 포함된 div를 생성합니다.
var $conBottomDiv = createElement("div")
.addClass('jConBottom')
.css('top ', options.height - $titDiv.outerHeight() -40 'px');

//하단 확인 버튼 생성
var $conBottomBtn = createElement("div")
.addClass ('jBtnConfirm')

.html('OK')
.click( close);

마지막으로 이 두 부분을 필요한 위치에 첨부하는 것을 잊지 마세요. Dom이 생성되면 괜찮을 것입니다. . . 렌더링: 꾸며보니 전보다 더 좋아보이네요^_^

코드 패키지 다운로드

Journey of jQuery 기반 팝업 메시지 플러그인 DivAlert(1)



jQuery 기반 메시지 프롬프트 플러그인 DivAlert(2)

JQuery 기반 메시지 프롬프트 플러그인 DivAlert 여정(3)

권장