<! Doctype html> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta charset = "UTF-8"> <Title> the close layer is automatically displayed in the lower right corner of jquery </title> <base target = "_ blank"/> <Script type = "text/javascript" src = "jquery/jquery-1.11.2.min.js"> </script> <Style type = "text/css"> *{ Margin: 0px; Padding: 0px; } A {color: black; } # Keleyislide { Width: 300px; Height: 200px; Border: 1px solid #000; Position: fixed; Bottom: 2px; Right: 2px; Display: none; Background-color: White; Z-index: 9999; } # Keleyislide { Position: absolute; Top: 8px; Right: 8px; Font-size: 12px; Text-decoration: none; Color: Blue; } # Keleyislide h2 { Font-size: 24px; Text-align: center; Font-family: ""; } # Reshow { Position: fixed; Right: 2px; Bottom: 2px; Font-size: 12px; Display: none; Background-color: White; Cursor: pointer; Border: 1px solid #000; } </Style> </Head> <Body> <Div style = "background-color: Green; width: 100%; height: 150px;"> keleyi.com </div> <Div style = "background-color: Red; width: 100%; height: 150px;"> welcome </div> <Div style = "background-color: Yellow; width: 100%; height: 150px;"> after a certain period of time, the pop-up layer is automatically hidden. </Div> <Div style = "background-color: Silver; width: 100%; height: 150px;"> plan </div> <Div style = "background-color: Aqua; width: 100%; height: 150px;"> aaaa </div> <Div style = "background-color: Fuchsia; width: 100%; height: 150px;"> jihua </div> <Div style = "background-color: Green; width: 100%; height: 150px;"> jb51.net </div> <Div style = "background-color: Blue; width: 100%; height: 150px;"> bbbb </div> <Div style = "background-color: Olive; width: 100%; height: 150px;"> welcome </div> <Div style = "background-color: Green; width: 100%; height: 150px;"> randomvisit </div> <Div style = "background-color: Purple; width: 100%; height: 150px;"> cccc </div> <Div style = "background-color: Green; width: 100%; height: 150px;"> B </div> <Div style = "background-color: Lime; width: 100%; height: 150px;"> myslider </div> <Div style = "background-color: Orange; width: 100%; height: 150px;"> Jihua </div> <Div id = "reshow"> you are coming back soon </div> <Div id = "keleyislide"> <A href = "javaScript: void (0)" id = "close" target = "_ self"> close </a> <Span style = "line-height: 50px;"> A reproducible layer is displayed in the lower right corner. <br/> </span> </Div> <Script type = "text/javascript"> Function jiade_cnblogs_com () {$ ("# kel" + "eyislide"). slideDown ("slow"); $ ("# reshow"). hide ();} Function KeleyiAutoHide () {$ ("# ke" + "leyislide"). slideUp ("slow"); $ ("# reshow"). show ();} $ (Document). ready (function (){ SetTimeout (function (){ Jiade_cnblogs_com (); }, 1000) SetTimeout (function () {KeleyiAutoHide () ;}, 9000) $ ("# Close"). click (function (){ KeleyiAutoHide (); }) $ ("# Reshow"). mouseover (function (){ Jiade_cnblogs_com ();}) }) </Script> </Body> </Html> |