aardio-HTMLayout 纯CSSS! TIPS弹窗自动显示隐藏

特性：

纯CSS & CSSS！打造；
支持更换图标、文字等；
自动显示 2秒后自动隐藏；
非常适合做提示信息框；

源代码:


import win.ui;
/*DSG{{*/
mainForm = win.form(text="tipsbox by Mr.R";right=759;bottom=469;)
mainForm.add()
/*}}*/

import web.layout; 
import web.layout.behavior.windowCommand;

wbLayout = web.layout( mainForm )  
wbLayout.html = /**
<!doctype html>
<html>
<head>
    <style type="text/css">
    html,body{ height:100%; margin:0; } 
    body widget { size:*;   }
    body{size-changed!:
            $1(#show_msg).fade = "true" ,
            $1(#show_msg):value = self.box-border-width() + "," + self.box-border-height();}
    #show_msg{
            position: absolute;
                    top:50%%;left:50%%;                 
                    width: calc(text-width(self:value)); 
                    max-width:400px;                    
                        height:85px;line-height:85px;
                        padding:0 30 0 80;
                        flow:horizontal;        
                        background:#ccc;
                        border-radius:15px;
                        foreground-image:url(res\fill.png);
                        foreground-repeat:no-repeat;
                        foreground-position:30px 50%;                        
                        color:2c2c2c;font-size: 18px;
                        display:none;opacity: 0;
                        overflow: hidden;}
#show_msg[tips = "yes"]{   
        foreground-image:url(res\fill_w.png);  
        background:#b82525;color:#fff;
}
#show_msg[fade = "true"]{
        assigned!: 
                self::opacity = 0.01, 
                self::display = "block", 
                self.start-animation();
        animation-step!: 
                self::opacity < 1.0  ?
                ( self::opacity = self::opacity + 0.1, return 15 )#
                ( self.fade = "close", return cancel );
        }
#show_msg[fade = "close"]{
        assigned!: 
                self.start-timer(2000); 
        timer!: 
                self::opacity = 1.0, 
                self::display = "block",
        self.start-animation();
    animation-step!: 
                self::opacity > 0 ?
            ( self::opacity = self::opacity - 0.1, return 15)#
            (self.fade = none,self::display ="none",self::opacity =9,return cancel);
}

button {width:48px;height:28px;border:1px solid #999;background:#fff;border-radius: 5px;padding:0 8 0 8;margin:10px;}
#btn1{click!: $1(#show_msg).fade = "true" ,$1(#show_msg).tips = none,$1(#show_msg):value = "这里是文字";}
#btn2{click!: $1(#show_msg).tips = "yes" , $1(#show_msg).fade = "true" ,$1(#show_msg):value = "厉害了我的哥";}
    </style>
</head>
<body>

        <div> 
                <button #btn1 value = "默认" />
                <button #btn2 value = "更换图标" />
        <div>
    <div #show_msg>这是默认文字</div>
</body>
</html>
**/
 


mainForm.show() 
return win.loopMessage();

代码资源下载: 点此下载

原文链接：https://www.btbat.com/1078.html

aardio-HTMLayout 纯CSSS! TIPS弹窗 自动显示隐藏

aardio-HTMLayout 纯CSSS! TIPS弹窗自动显示隐藏