집 >웹 프론트엔드 >JS 튜토리얼 >jquery 팝업 레이어 구현 code_jquery

jquery 팝업 레이어 구현 code_jquery

WBOY원래의: 2016-05-16 18:42:541258검색

분석하고 온라인 참고해서 드디어 얻었네요~~
jQuery 플러그인 코드:

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

 
jQuery.fn.selectItem = function(targetId) { 
var _seft = this; 
var targetId = $(targetId) 
this.toggle( 
function() { 
var A_top = $(this).offset().top $(this).outerHeight(true); // 1 
var A_left = $(this).offset(). 왼쪽; 
 targetId.bgiframe(); 
targetId.show().css({ "position": "absolute", "top": A_top "px", "left": A_left "px" }) ; 
} 
, function() { 
targetId.hide(); 
} 
) 
targetId.find("#selectItemClose").click(function() 
targetId.hide(); 
}) 
targetId.find("#selectSub :checkbox").click(function() { 
targetId.find(":checkbox").attr ("체크됨", false); 
$(this).attr("체크됨", true) 
_seft.val($(this).val()) 
targetId.hide() ; 
} ); 
$(document).click(function(event) { 
if (event.target.id != _seft.selector.substring(1)) { 
targetId.hide (); 
} 
}); 
targetId.click(function(e) { 
e.stopPropagation(); 
}); 

 
HTML 코드: 

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

🎜>

css 스타일:

코드 복사

코드는 다음과 같습니다. /* pop div 시작 */ .selectItemcont{padding :8px;} .selectItemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;} .bgc_ccc{배경: #E88E22;}

.selectItemleft{float :left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;}

.selectItemright{float:right; 커서:포인터;색상:#fff;} 
.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;} 
.selectItemhidden{display:none;} 
# selectCompetency 
{ 
display:none ; 
배경:#FFF; 
위치:absolute; 
왼쪽:center 
border:1px solid #000 ; 
overflow-x:hidden; 
width:250px; 
z-index:1000; 
최대 높이:200px; >/* pop div end */ 
 
 
JavaScript 코드: 




코드 복사 


 코드는 다음과 같습니다. 다음: 

$(" #txtCompetency").selectItem("#selectCompetency")

텍스트 상자를 클릭하면 바로 아래에 새 레이어가 나타납니다. . 다시 클릭하면 레이어가 숨겨집니다. 앞으로도 이 플러그인은 계속해서 개선해 나가도록 하겠습니다~~~오(∩_∩)오...

성명：

이전 기사：DOM 스크립트 프로그래밍_자바스크립트 기술의 형제 노드다음 기사：DOM 스크립트 프로그래밍_자바스크립트 기술의 형제 노드

jquery 팝업 레이어 구현 code_jquery

관련 기사