jquery 팝업박스 사용예(1)_jquery

최근에 프로젝트를 진행했는데 팝업박스와 관련된 기능이 많이 있었는데, 예전에는 팝업박스가 그런 거라고 생각했는데 구현하기 쉬웠는데 최근에 이 기능을 구현하게 되었어요. 제가 생각하지 못한 문제가 많다는 걸 알게 됐어요.
예를 들어 일부 추가, 삭제, 수정을 위한 팝업 상자의 경우, 일부 사용자를 추가할 때 수정 시에 따라 사용자에 대한 일부 정보, 비밀번호 설정 및 기타 정보를 팝업 상자에 제출해야 합니다. 비밀번호 등의 변경을 위해 이용자의 이름과 아이디번호를 이용합니다.

예제는 다음과 같습니다.

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

• 
  🎜>
  
  

  
  

  블루 메이플 프론트 엔드

  ;dd>문의 추가 【10】
  

  트랙 문의【1000 】
  

  
  









블루 메이플 프런트 엔드


문의 추가【10】

문의 추적【1000】





< a href="" class="close">




contentid= ".pwdTips">블루 메이플 프런트 엔드


문의 추가【10】

; dd>트랙 조회【1000】




• 
  
  
  🎜>

  블루 메이플 프런트 엔드

  
  

  문의 추가【10】

  트랙 조회【1000】

  
  
  
  
• 
  
  블루 메이플 프론트 엔드

  
  

  문의 추가【10< ;/a>】

  
  

  트랙 문의【1000】

  
  >
  
  



추가

팝업 상자 내용:




코드 복사


코드는 다음과 같습니다.

용 户 name：

营销客服：

登录密码：

确认密码：

确认
取消

实现的弹框的js

复代码 代码如下:

$(function(){
var $window = $(window),
$doc = $(document),
$body = $('body');
//关于管理员添加删除的js代码
var tabLi=$(".tabPanel").find("li");
tabLi.hover(function(){
$(this).addClass( "hover").siblings().removeClass("hover");
},function(){})
/*弹take框정位*/
$(window).scroll(function() {
var pwdTips =$(".pwdTips");
var height=pwdTips.height();
var width=pwdTips.width();
var bodyHieght=$(window). height() ;
var bodyWidth=$(window).width() ;

if(!pwdTips.is(":hidden")){
pwdTips.css({
위치: "고정",
상단: (bodyHieght-height)/2,
왼쪽:(bodyWidth-width)/2
})
}

}); bg_html = '

'
if(_bg.length === 0) {
_bg = $(bg_html);
}
$body.append(_bg);
_bg.css({
위치 : '절대',
상단 : '0px',
왼쪽: '0px',
너비: $window.scrollLeft() $window.width() 'px',
높이: $doc.height(),
'z-index' : zindex
});
반품 _bg;
};

/*弹框半透명명정보*/
/*확정사례*/

varbindClick = function(obj,handlerEvent){
obj.bind( "click",function(e){
e.preventDefault();
bgShadow(1001)
var select=$(this).attr('contentid')
var onLineId= $(this).attr('id');
var pwdTips=$(select);
if(handlerEvent!=null)
{
handlerEvent($(this)); >
}
pwdTips.show();
pwdTips.find(".closeBtn,.diaSmtRst").click(function(){
pwdTips.hide();
var _bg = $('div.pwdTipsBg');
_bg.remove();
})
pwdTips.find('#onLineId').val(onLineId)

});

};
var show=tabLi.find("dt"),
addPanelBtn=$(".addPanelBtn"),
clickBtn=$(".clickBtn");
var setValue= function(obj){

if($(obj).is('.addPanelBtn'))
{
$('#opename').attr(' 값',"");

$('#pwdRest').find('#userName').show();

}
else
{

$('#pwdRest').find('#userName').hide();
$('#openname').attr('value',obj.text());
$("input.shareId").attr('value',obj.attr('id'))
}

}
$(function(){
bindClick(show,setValue);
bindClick(addPanelBtn,setValue)
bindClick(clickBtn,setValue)
});
})


所型判断根据情况做判断显示，获取应的值，先根据触发类型判断是修改광고