element右下角弹出框怎么写

JavaScript0520

element右下角弹出框怎么写,第1张

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

2、其次在mainjs中引用。

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

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

<!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>