jQuery 팝업 레이어 플러그인 Lightbox_me 사용 가이드_jquery

웹사이트 개발 과정에서 웹사이트의 상호 작용 효과를 높이기 위해 때때로 현재 페이지에 로그인, 등록, 설정 등의 팝업 창이 나타나야 하는 경우가 있습니다. 이러한 창은 레이어이고, 팝업 창은 팝업 레이어입니다. jQuery에는 많은 팝업 레이어 플러그인이 있지만 그 중 일부는 HTML5 CSS3 브라우저에서 완벽하게 지원됩니다. 단, IE8 이하 등의 브라우저에서는 원하는 효과가 표시되지 않습니다. 예를 들어 jquery.avgrund 플러그인은 ie8에서 표시될 수 없습니다.

이 글에서 소개하는 플러그인 Lightbox_me는 크롬, 파이어폭스, ie7, ie8, ie9 등 주류 브라우저를 완벽하게 지원할 수 있습니다.

1.Lightbox_me 플러그인 기능

팝업레이어 표시에 사용

2.Lightbox_me 공식 주소

http://buckwilson.me/lightboxme/
웹 페이지 하단에 데모 주소와 공통 속성이 있습니다.

3. Lightbox_me 사용 방법

1. 먼저 jquery.js 및 jquery.lightbox_me.js를 인용하세요

<script src="/ref/jquery-1.7.2.min.js"></script>
<script src="/ref/lightbox_me/jquery.lightbox_me.js"></script>

2. 사용된 코드

<script type="text/javascript">
$(function() {
  $('#login').click(function(e) {
    $('#loginbox').lightbox_me({
      centered: true, 
      onLoad: function() { 
        $('#loginbox').find('input:first').focus()
      }
    });
    e.preventDefault();
  });
  $('#cancel').click(function(){
    $('#loginbox').trigger('close');
    //alert('aaa');
  });
});
</script>

4.Lightbox_me 스타일 수정

팝업 레이어의 스타일 수정은 매우 간단합니다. CSS만 사용할 수 있으면 됩니다. 예를 들어 다음 코드는 다음과 같습니다.

#loginbox{
  width:400px;
  display:none;
  background:white;
  border:1px solid #ccc;
}
body {
  font-size:12px;
  font-family:微软雅黑;
}
.loginbox-title {
  background: #eef2f7;
border-bottom: 1px solid #ccc;
  margin-bottom:10px;
  padding:8px 0;
  font-size:14px;
  text-align:center;
  
}
.loginbox-footer{
  padding:8px 0;
  border-top:1px solid #ccc;
  text-align:center;
  background:#eef2f7;
}
table {
  width:98%;
  margin:0 8px;
}
th, td {
  padding:8px 0;
}
th {
  text-align:left;
}
.big {
  padding:5px 18px;
}

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.