js_javascript 기술을 사용하여 오른쪽 하단에 프롬프트 상자를 구현하는 방법

이 글의 예시에서는 js를 사용하여 오른쪽 하단에 프롬프트 상자를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

오른쪽 하단에 프롬프트 상자를 구현하는 Jquery 플러그인(popup.js)

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

//兼容ie6的fixed代码  
//jQuery(함수($j){ 
//    $j('#pop').positionFixed() 
//}) 
(함수($j){ 
    $j.positionFixed = 함수(el){ 
        $j(el).each(function(){ 
            새로 수정됨(이것)
        }) 
        엘을 반환;                   
    } 
    $j.fn.positionFixed = function(){ 
        $j.positionFixed(this) 반환
    } 
    var 고정 = $j.positionFixed.impl = 함수(el){ 
        var o=이것; 
        o.sts={ 
            대상 : $j(el).css('position','fixed'), 
            컨테이너 : $j(창)
        } 
        o.sts.currentCss = { 
            top : o.sts.target.css('top'),               
            오른쪽 : o.sts.target.css('right'),               
            하단 : o.sts.target.css('bottom'),                
            왼쪽 : o.sts.target.css('left')              
        } 
        if(!o.ie6)return; 
        o.bindEvent(); 
    } 
    $j.extend(fixed.prototype,{ 
        ie6 : $.browser.msie && $.browser.version < 7.0, 
        바인딩이벤트 : function(){ 
            var o=이것; 
            o.sts.target.css('position','absolute') 
            o.overRelative().initBasePos(); 
            o.sts.target.css(o.sts.basePos)
            o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent()); 
            o.setPos(); 
        }, 
        overRelative : function(){ 
            var o=이것; 
            var 상대 = o.sts.target.parents().filter(function(){ 
                if($j(this).css('position')=='relative') 이것을 반환합니다. 
            }) 
            if(relative.size()>0)relative.after(o.sts.target)
            반환 오; 
        }, 
        initBasePos : function(){ 
            var o=이것; 
            o.sts.basePos = { 
                상단: o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():0), 
                왼쪽: o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0) 
            } 
            반환 오; 
        }, 
        setPos : function(){ 
            var o=이것; 
            o.sts.target.css({ 
                상단: o.sts.container.scrollTop() o.sts.basePos.top, 
                왼쪽: o.sts.container.scrollLeft() o.sts.basePos.left
            }) 
        }, 
        스크롤이벤트 : function(){ 
            var o=이것; 
            반환 함수(){ 
                o.setPos(); 
            } 
        }, 
        resizeEvent : function(){ 
            var o=이것; 
            반환 함수(){ 
                setTimeout(함수(){ 
                    o.sts.target.css(o.sts.currentCss)       
                    o.initBasePos(); 
                    o.setPos()
                },1)     
            }            
        } 
    }) 
})(jQuery) 
 
jQuery(함수($j){ 
    $j('#footer').positionFixed()
}) 
 
//pop右下角弹窗函数
기능 팝(제목, URL, 소개){ 
    this.title=제목; 
    this.url=url; 
    this.intro=소개; 
    this.apearTime=1000; 
    this.hideTime=500; 
    this.delay=10000; 
    //添加信息 
    this.addInfo(); 
    //显示 
    this.showDiv(); 
    //关闭 
  this.closeDiv(); 
} 
Pop.prototype={ 
  addInfo:function(){ 
    $("#popTitle a").attr('href',this.url).html(this.title); 
    $("#popIntro").html(this.intro); 
    $("#popMore a").attr('href',this.url); 
  }, 
  showDiv:함수(시간){ 
        if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) { 
      $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);; 
    } else{//调용jquery.fixed.js,解决ie6不能용fixed 
      $('#pop').show(); 
            jQuery(함수($j){ 
                $j('#pop').positionFixed()
            }) 
    } 
  }, 
  closeDiv:function(){ 
        $("#popClose").click(function(){ 
               $('#pop').hide()
~ );
}
}

오른쪽 하단 프롬프트 상자 예시

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

 
 
 
     
     
 
 

请看浏览器有下角

 
 
 
 
 

 
     
   

 
    关闭 
   

温馨提示

 
   

 
   

 
   

 
       

这里是标题

 
       

这里是内容简介

 
   

 
   

查看 »