SoFunction
Updated on 2025-02-28

JavaScript implements a simple prompt information box in the lower right corner of the page

Since I found an open source one that was very useful before, it can be fixed in the lower right corner of the browser; the compatibility is also very good; plus a small function point that affects the application later, I decided to rewrite one; this one can only be fixed in the lower right of the current page, and the system has an upper and lower structure to meet the needs and is not continuing to expand;
Two functions:
-- Set the height and width of the prompt box (optional)
-- Set the title, content, and stay time

var time;
var delayTime;
$(function(){
  // Add floating DIV  $('body').append("<div id='notice' onselectstart='return false'><span class='notice_title'> </span><span class='cbtn'>[closure]</span><div class='notice_content'></div></div>");
   
  // Change the style  $('#notice').css({right:"0",bottom:"0",cursor:"default",position:"fixed","background-color":"#CFDEF4",color:"#1F336B","z-index":"999",border:"1px #1F336B solid",margin:"2px",padding:"10px","font-weight":"bold","line-height":"25px",display:"none"});
  $('#notice .cbtn').css({color:"#FF0000",cursor:"pointer","padding-right":"5px",float:"right",position:"relative"});
  $('#notice .notice_content').css({margin:"3px","font-weight":"normal",border:"1px #B9C9EF solid","line-height":"20px","margin-bottom":"10px",padding:"10px"});
   
  /* Binding event*/
  $('#notice').hover(
    function(){
      $(this).stop(true,true).slideDown();
      clearTimeout(time);
    },
    function(){
      time = setTimeout('_notice()',delayTime);
    }
  );
   
  //Binding Close Event  $('.cbtn').bind('click',function(){
    $('#notice').slideUp('fast');
    clearTimeout(time);
  });
});
$.extend({
  lay:function(_width,_height){
    $('#notice').css({width:_width,height:_height});
  },
  show:function(_title,_msg,_time){
     delayTime = _time;
     $('.notice_title').html(_title);
     $('.notice_content').html(_msg);
     $('#notice').slideDown(2000);
     time = setTimeout('_notice()',delayTime);
  },
});
function _notice(){
  $('#notice').slideUp(2000);
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html>
 <head>
  <title></title>
   
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
  <meta http-equiv="description" content="this is my page"/>
  <meta http-equiv="content-type" content="text/html; charset=GBK"/>
   
  <!--<link rel="stylesheet" type="text/css" href="./">-->
 
 </head>
  
 <body onload='initPage();'>
 </body>
 <script type="text/javascript">
  function initPage(){
    var returnMsg = "<p>Information 1 jquery-1.7.</p><p>Information 2 </p><p>Information 3</p>";
    $.show('Prompt message',returnMsg,10000);
  }
 &lt;/script&gt;
 &lt;script src="jquery-1.7." type="text/javascript" &gt;&lt;/script&gt;
 &lt;script src="" type="text/javascript" &gt;&lt;/script&gt;
&lt;/html&gt;

The above is the entire content of this article, I hope you like it.