自定义消息提示框

已于 2023-11-27 16:37:56 修改
阅读量29 收藏
点赞数
文章标签： 自定义消息提示框
于 2018-12-12 17:32:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38600133/article/details/84976527
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义提示弹出框</title>
<link rel="stylesheet" href="../css/hover.css" type="text/css"/>
<script src="../js/jquery-3.3.1.min.js.js"></script>
<style>
	.the-message-div{
		position:fixed;
		top:20%;
		width:100%;
		height:30px;
		line-height:30px;
		margin-top:-15px;
		vertical-align: middle;
		transform: perspective(1px) translateZ(0);
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		-webkit-animation-name: hvr-wobble-vertical;
		animation-name: hvr-wobble-vertical;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
	}
	.the-message-p{
		line-height: 1.5em;
		background:#000;
		opacity:0.8;
		color:#fff;
		text-align:center;
		padding:10px 10px;
		margin:0 auto;
		font-size:12px;
		border-radius:4px;
	}
</style>
</head>
<body>

<input type="button" value="复制"  onclick="tankuang('200','看这里','2000');"/>

<script>
function tankuang(pWidth,content,time) {
    $("#msg").remove();
    var html ='<div id="msg" class="the-message-div"><p class="the-message-p" style="width:'+ pWidth +'px;">'+ content +'</p></div>'
    $("body").append(html);
    var t=setTimeout(next,time);
    function next() {
        $("#msg").remove();
    }
}
</script>
</body>
</html>

关于提示框的出场动作可以自己去做，这里我是去这个网址http://wow.techbrood.com/fiddle/852将特效给弄下了，这一点一百个人有一百种方法，上面代码用的hover.js就是去那下载的

weixin_38600133
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义提示框
Kai_gai的专栏
07-09 5465
之前通过单击鼠标弹出对话框的形式实现了获取Word中内容，这种方式的观赏性不强。我们一般都可以看到一个这样的工具提示，当鼠标移动上去时，弹出一个窗体显示工具的信息。现在，我们就来实现这么一个功能。效果图如下： 其实这类提示完全可以由MFC自带的CMFCToolTipCtrl或者CToolTipCtrl来实现，只不过这看起来有点单调。 为此，我们自己来实现这么一个提示类的功能。提示类
微信小程序 自定义消息提示框
08-29
微信小程序自定义消息提示框 微信小程序自定义消息提示框是微信小程序中一个非常重要的功能模块。通过使用wx.showToast(OBJECT)接口调用，我们可以实现自定义消息提示框的功能，从而满足不同场景下的需求。 首先，...
Qt自定义消息提示框
hkSDK的博客
09-03 977
Qt 自定义消息提示框
android自定义消息提示框
weixin_41454168的博客
03-12 2376
自定义消息提示框主要分为两部分1、自定义消息提示框的布局想要怎样的布局都可以自己定义，主要是根据 id 来控制每一个控件创建 view_toast.xml 布局：&lt;LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gr...
QT-自定义消息提示框，好看大气
u013083044的博客
03-13 1154
原生的QT提示框总是让人觉得难以接受，因此特定重新封装一个类来替换原生的，使用过程跟原生的一致，使用比较方便。
c# 自定义消息提示框
qq_15572445的专栏
08-24 1098
c# winform 自定义消息提示框。带自动关闭，自定义按钮，多按钮增加，带复选框。 MessageBoxExDemo
Qt自定义消息提示框源码
02-20
在Qt开发中，有时我们需要创建自定义的消息提示框来提供更为个性化的用户交互体验。"Qt自定义消息提示框源码"就是一个针对这个需求的解决方案。这个资源包含cpp和h文件，以及必要的资源文件，使得开发者可以方便地...
原生js实现自定义消息提示框
01-22
本文实例为大家分享了js实现自定义消息提示框的具体代码，供大家参考，具体内容如下 效果图 上代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport ...
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【SCI一区】Matlab实现金豺优化算法GJO-CNN-LSTM-Attention的风电功率预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于Spring Boot+javaScript开发的目前最火爆校园二手交易网站+源码+项目文档+数据库+运行教程（毕业优秀项目
07-29
基于Spring Boot+javaScript开发的目前最火爆校园二手交易网站+源码+项目文档+数据库+运行教程，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介： 该C2C校园二手交易平台，界面简洁明了，能给用户一种美的视觉上的享受。并且操作简单易懂，可以大胆但是毫不夸张的说，本系统适用于99%的青少年愉快的使用，对于不是很了解智能科技的人来说，只要看看就基本可以掌握然后熟练的使用该系统了。并且本系统的动画效果做得非常的完美，前端工作人员争取使用最少的代码实现最炫酷的动态效果，例如3D页面转换，动态加入购物车效果，搜索的时候动态自动提示商品名字功能等等，无一不是本系统的亮点。由于前端本着使用最少的代码，实现最炫酷的动态效果，所以其性能可以来说是杠杠的。并且前端所构建的网站为响应式网站，当页面的大小发送变化的时候，页面会随着变化，但是我们的变化不会出现任何的纰漏。在兼容性方面，本网站可以完美的兼容ie8+，Firefox8+，chrome6+等等，虽然目前比较少用户使用这些版本以下的浏览器，.................
【创新未发表】Matlab实现白鲸优化算法BWO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于ARM64架构CPU使用docker-compose一键离线部署zookeeper 3.8.4分布式集群工具
07-29
原文链接：https://blog.csdn.net/m0_37814112/article/details/140762915 实现功能如下： 1、支持单机部署（1 zookeeper）。 2、支持单机伪集群部署（3 zookeeper）。 3、支持多机分布式机部署（3 zookeeper）。 4、支持数据目录、端口、JVM内存。 5、支持zookeeper配置文件、数据目录持久化。 6、支持部署、启动、停止、卸载、检测等操作。
24.androidJNI实战手册.zip
07-29
24.androidJNI实战手册
qt 自定义消息提示框
06-23
Qt自定义消息提示框是指开发者可以根据自己的需求设计出符合自己应用程序风格的消息提示框，从而提高应用程序的用户体验。可以使用Qt的QWidget或QDialog等控件来实现消息的展示和弹出。一般而言，自定义消息提示框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值