jQuery 연구 노트 (2)--jquery를 사용하여 다양한 모달 프롬프트 상자 코드 및 프로젝트 구조 구현_jquery
jquery
프롬프트 상자
예전부터 모달 프레임을 구현하고 싶었는데, jquery 플러그인을 많이 찾아봤는데 만족스러운 플러그인을 이번에 만나보게 됐거든요. 아직 개발 단계라서 문서 API도 없는 상태여서 알아내는 데 시간이 많이 걸렸어요.
먼저 코드를 살펴보겠습니다. 소스 코드를 보고 원하는 효과를 맞춤 설정했습니다.
코드 복사 코드는 다음과 같습니다.
<%@ page 언어="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8" %>
< ;!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
JQueryMagicDialog
;script type="text /javascript">
$(function(){
$('.dlgDemoBtn').click(function(){
var el = $(this), act = el.attr('action');
switch(act){
case '기본':
$('').mac('dialog',{
title: 'prompt',
model: true,
autoOpen: true,
width: 200,
draggable: true,
el: '
You clicked me ! '
});
break;
case 'extended':
mac.opendlg({
title: 'Prompt',
message: 'Press { 0}은 창을 닫을 수 있습니다.',
params: ['ESC/Enter'],
버튼: [{
text: '확인',
클릭 : function(d){
d.close();
}
}]
})
break
case 'wait':
var h = mac .wait('이 창은 3초 후에 자동으로 닫힙니다.');
window.setTimeout(function(){
h.close();
}, 3000)
break; > case 'alert':
mac.alert('Hello!');
break;
case 'confirm':
mac.confirm('
계속하시겠습니까? / p>', function(){
alert('클릭했습니다!')
}, null)
break
case 'customize':
mac.confirm(' < ;p>확실합니까?
text: 'Close',
click: function(d){
d.close()
}
},{
텍스트: '확인',
클릭: function(d){
d.close();
}
}]); > 중단
}
})
;