>웹 프론트엔드 >JS 튜토리얼 >jQuery 연구 노트 (2)--jquery를 사용하여 다양한 모달 프롬프트 상자 코드 및 프로젝트 구조 구현_jquery

jQuery 연구 노트 (2)--jquery를 사용하여 다양한 모달 프롬프트 상자 코드 및 프로젝트 구조 구현_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 17:37:551139검색

예전부터 모달 프레임을 구현하고 싶었는데, jquery 플러그인을 많이 찾아봤는데 만족스러운 플러그인을 이번에 만나보게 됐거든요. 아직 개발 단계라서 문서 API도 없는 상태여서 알아내는 데 시간이 많이 걸렸어요.

먼저 코드를 살펴보겠습니다. 소스 코드를 보고 원하는 효과를 맞춤 설정했습니다.

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

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>확실합니까?

', null, null, [{
text: 'Close',
click: function(d){
d.close()
}
},{
텍스트: '확인',
클릭: function(d){
d.close();
}
}]); > 중단
}
})



> ;

< ;button class="dlgDemoBtn"action="confirm">확인
;

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.