JavaScript怎么实现网页右下角弹出窗口代码

JavaScript016

JavaScript怎么实现网页右下角弹出窗口代码,第1张

 

<html>

<head>

<metahttp-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>JavaScript实现网页右下角弹出窗口代码</title>

</head>

<style type="text/css">

#winpop { width:200px height:0pxposition:absolute right:0 bottom:0 border:1px solid #666 margin:0padding:1px overflow:hidden display:none}

#winpop .title { width:100% height:22pxline-height:20px background:#FFCC00 font-weight:bold text-align:centerfont-size:12px}

#winpop .con { width:100% height:90pxline-height:80px font-weight:bold font-size:12px color:#FF0000text-decoration:underline text-align:center} /* http://www.webdm.cn */

#silu { font-size:12px color:#666position:absolute right:0 text-align:right text-decoration:underlineline-height:22px}

.close { position:absolute right:4pxtop:-1px color:#FFF cursor:pointer}

</style>

<scripttype="text/javascript">

function tips_pop(){

 var MsgPop=document.getElementById("winpop")

 var popH=parseInt(MsgPop.style.height)//将对象的高度转化为数字

  if (popH==0){

  MsgPop.style.display="block"//显示隐藏的窗口

 show=setInterval("changeH('up')",2)

   }

 else {

  hide=setInterval("changeH('down')",2)

  }

}

function changeH(str) {

 varMsgPop=document.getElementById("winpop")

 varpopH=parseInt(MsgPop.style.height)

 if(str=="up"){

  if(popH<=100){

 MsgPop.style.height=(popH+4).toString()+"px"

  }

 else{ 

 clearInterval(show)

  }

 }

 if(str=="down"){

  if(popH>=4){ 

 MsgPop.style.height=(popH-4).toString()+"px"

  }

 else{

 clearInterval(hide)  

 MsgPop.style.display="none" //隐藏DIV

  }

 }

}

window.onload=function(){//加载

document.getElementById('winpop').style.height='0px'

setTimeout("tips_pop()",800)//3秒后调用tips_pop()这个函数

}

</script>

<body>

<div id="silu">

<buttononclick="tips_pop()">3秒后会在右下角自动弹出窗口，如果没有弹出请点击这个按钮</button>

</div>

<div id="winpop">

 <div>您有新的短消息！<spanclass="close"onclick="tips_pop()">X</span></div>

   <div>1条<ahref="http://www.luenuo.com">经典语录</a>(</div>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 

        <meta http-equiv="Content-Type" content="text/html charset=GB2312" /> 

        <title>右下角弹窗效果练习 by 阿会楠</title> 

        <script language="JavaScript" type="text/javascript"> 

            function $(obj){ 

                return document.getElementById(obj) 

            } 

            function pop(obj){ 

                var h = parseInt($("popDiv").currentStyle.height) 

                $("popDiv").style.height = (h + obj) + "px" 

                if(parseInt($("popDiv").style.height) < 2){ 

                    window.clearInterval(timer) 

                    $("popDiv").style.display = "none" 

                } 

                if(parseInt($("popDiv").style.height) >= 200){ 

                    window.clearInterval(timer) 

                } 

         

            } 

             

            var timer 

            function runtimer(obj){ 

                timer = window.setInterval(function(){pop(obj)},10) 

            } 

            window.onload = function(){ 

                runtimer(2) 

            } 

        </script> 

    </head> 

    <body> 

        <div style="position:absoluteright:0bottom:0height:0pxwidth:200pxborder:1px solid red" id="popDiv"> 

        <a href="javascript:runtimer(-2)void(0)">×</a> 

        </div> 

    </body> 

</html>

1、首先在vue项目中创建一个js。

2、其次在mainjs中引用。

3、然后在dialog组件代码中添加v-if为了让每次弹出框都不继承上一次的改变。

4、最后在引用组件时，data返回一个即可写出。