在右下角弹出提示

本文介绍了一个使用JavaScript生成带有定时关闭功能的弹窗消息的方法。该方法通过字符串拼接生成HTML脚本,实现自定义样式的提示信息,并利用递归计数实现自动关闭效果。

 public static string GetMsg(string strDescription)
  {
   string strScript = "<script language=/"javascript/">";
   if(strDescription != "")
   {
    strScript += "document.write(/"<div id='popmsg' style='position:absolute;right:0px;bottom:0px;width:260px;height:165px;z-index:1;padding:20px 20px 20px 20px;word-break:break-all;text-align:left;background-image: url(images/popmsgbg.gif);'>"+strDescription+"</div>/");";

    strScript += "j=3;"+
     "function popClose() {"+
     " j -= 1;"+
     " if (j > 0){setTimeout(/"popClose()/",1000);}"+
     " else{popmsg.style.display=/"none/";}"+
     "}";

    strScript += "popClose();";

   }
   strScript += "</script>";

   return strScript;
  }

在HTML中实现右下角弹出提示框可以通过多种方式,以下结合引用内容给出常见的实现方法: ### 使用jQuery实现 在实际应用中,可让提示框自动弹出。需要在jsp页面的`<html>`标签之外写一个`<script>`标签,确保在加载jsp页面内容之前执行其中的方法。弹出框本质是一个`div`层,满足条件时显示该层,`div`中可显示后台传过来的值并进行迭代输出。以下是示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>右下角提示框</title> <style> #popup { position: fixed; right: 10px; bottom: 10px; width: 200px; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; display: none; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="popup"> 这是一个提示框 </div> <script> $(document).ready(function() { // 模拟满足条件后显示提示框 setTimeout(function() { $('#popup').fadeIn(); }, 2000); }); </script> </body> </html> ``` ### 使用原生JavaScript实现 可以通过判断元素的位置和页面高度等条件来控制提示框的显示。示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>右下角提示框</title> <style> #popup { position: fixed; right: 10px; bottom: 10px; width: 200px; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; display: none; } </style> </head> <body> <div id="popup"> 这是一个提示框 </div> <script> window.onload = function() { var popup = document.getElementById('popup'); // 模拟满足条件后显示提示框 setTimeout(function() { popup.style.display = 'block'; }, 2000); }; </script> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值