jQuery로 구현된 블록 UI 팝업 레이어 예제【demo 소스 코드 다운로드 포함】

이 문서는 jQuery를 사용하여 캔버스 레이어 효과를 가진 blockUI 팝업 레이어를 구현하는 방법을 설명합니다. 여러분과 공유하고, 구체적인 내용은 다음과 같습니다：

먼저 코드를 추가해 보겠습니다：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title>blockUI（팝업 레이어）</title>
   <style type="text/css">
   #demo {
     width:100px;
     height:24px;
     text-align:center;
   }
   #displayBox{
     display:none;
   }
   </style>
 </head>
 <body>
   <button id="demo"> 클릭하여 팝업</button>
   <div id="displayBox">
     이 팝업 레이어에 표시할 내용입니다！！！<br /><br /><br /><a href="javascript:void(0);" onclick="$.unblockUI();return false;" title="[#1#]"> 클릭하여 닫기</a>
   </div>
 </body>
 </html>
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="jquery.blockUI.js"></script>
 <script type="text/javascript">
 $(function(){
   $('#demo').click(function(){
     $.blockUI({
       message: $('#displayBox'),
       css: {
         width: '500px',
         height: '100px',
         backgroundColor: '#eee',
         border: '1px solid red',
         color: 'green',
         textAlign: 'center',
         cursor: 'default'
       }
     });
   });
 >)
 </script>

운영 결과 이미지는 다음과 같습니다：

파라미터 설명은 다음과 같습니다：

message = 需要弹出的内容

css =弹出内容的样式，其中属性需要写成 js 的形式，如 background-color => 배경색

$.unblockUI() = 팝업 창 닫기

완전한 예제 코드는 여기를 클릭하세요본 사이트 다운로드。

공식 웹사이트 주소를 추가합니다: http://www.malsup.com/jQuery/블록/

jQuery 관련 내용에 대한 더 많은 정보를 찾으시려면 본 사이트의 특辑을 확인해 주세요: 《jQuery 창操作 기술 요약》、《jQuery 드래그 앤 드롭 기술 요약》、《jQuery 일반 플러그인 및 사용 방법 요약》、《jQuery 중 Ajax 사용 요약》、《jQuery 테이블(table) 操作 기술 요약》、《jQuery 확장 기술 요약》、《jQuery 일반 클래식 효과 요약》、《jQuery 애니메이션 및 효과 사용 방법 요약》 및 《jQuery 선택자 사용 요약》

본 문서에서 설명한 내용이 여러분의 jQuery 프로그래밍에 도움이 되길 바랍니다.

선언: 본 문서 내용은 인터넷에서 가져왔으며, 원저자가 소유하고 있습니다. 인터넷 사용자가 자발적으로 제공하고 업로드한 내용이며, 본 사이트는 소유권을 가지지 않으며, 인공 편집도 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해 내용이 발견되면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 (이메일 보내기 시 #을 @으로 변경하세요) 신고하시고 관련 증거를 제공하시면, 해당 저작권 침해 내용이 즉시 삭제됩니다.

기본 튜토리얼