php jquery 弹窗提示框,jQuery实现消息弹出框效果
本文实例为大家分享了jQuery消息弹出框的具体代码,供大家参考,具体内容如下
效果图
实现代码
.showMessage {
padding: 5px 10px;
border-radius: 5px;
position: fixed;
top: 45%;
left: 45%;
color: #ffffff;
}
.showMessageSuccess {
background-color: #00B7EE;
}
.showMessageError {
background-color: #ff0000;
}
$(function () {
$("#refresh1").click(function () {
showMessage("注册成功",1);
});
$("#refresh2").click(function () {
showMessage("您的网络已断开!",0);
});
});
/**
* 弹出消息提示框,采用浏览器布局,位于整个页面中央,默认显示3秒
* 后面的消息会覆盖原来的消息
* @param message:待显示的消息
* @param type:消息类型,0:错误消息,1:成功消息
*/
function showMessage(message, type) {
let messageJQ = $("
");
if (type == 0) {
messageJQ.addClass("showMessageError");
} else if (type == 1) {
messageJQ.addClass("showMessageSuccess");
}
/**先将原始隐藏,然后添加到页面,最后以600秒的速度下拉显示出来*/
messageJQ.hide().appendTo("body").slideDown(600);
/**3秒之后自动删除生成的元素*/
window.setTimeout(function () {
messageJQ.remove();
}, 3000);
}
正确消息
正确消息
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
php jquery 弹窗提示框,jQuery实现消息弹出框效果相关推荐
- html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单 发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
- bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- jquery 左右移动 以及使用layer.js弹出框呈现在页面上
今天写了一个左右移动 但是发现自己写的css效果一直都加不上去,不管了,还是先上自己有问题的代码,毕竟在失败中发现问题也是一种成长么. 好吧,其实我们都知道在列表有边框里,它的值来源于左边框,那么如果 ...
- 小程序确定取消弹窗_小程序开发之弹出框
小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果.这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框 wx.showToast() title:显示的提示信息,在没有图 ...
- vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
- android自定义模态框,安卓开发自定义弹出框的简单方式(纯代码布局)
弹出框在安卓开发中是经常会用到的,如果单纯的只是用安卓自带的对话框模式肯定是十分单调的. 再来我看来安卓一定有一个功能让我们像Layout添加Layout一样把Layout添加到提示框里面. 所以忘了 ...
- wpf 点击按钮弹出选择框_WPF-PopupWindow wpf右下角弹出框,通过按钮调用,类似QQ CSharp C#编程 238万源代码下载- www.pudn.com...
文件名称: WPF-PopupWindow下载 收藏√ [ 5 4 3 2 1 ] 开发工具: C# 文件大小: 90 KB 上传时间: 2013-07-24 下载次数: 19 详细说明:w ...
- Bootstrap 提示工具(Tooltip)弹出框
第一步: 加载3个框架 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">< ...
- 页面拖动功能jquery +js+html5 移动 弹出框 拖动 弹出框 拖动 div 拖动 弹出框
实现逻辑分析: 1.当鼠标触发按下事件 2.记录当前屏幕坐标 3.和要控制的div坐标向减的到二者之间关系 4.通过鼠标移动事件 5.激活div移动事件 6.div的新位置就鼠标位置和原始坐标的关系值 ...
最新文章
- 神秘又强大的@SpringBootApplication注解
- qt 自定义窗口customwindow
- 【数据平台】Centos下仅CPU安装TensorFlow
- java王子救公主的游_计蒜客 王子救公主(DFS)
- 亲戚再也看不见我一个人食吉野家了
- Pod详解-资源配额
- 平方根/立方根/根式
- Query siblings()
- z tree 如何把选中的节点保存为标准的json格式_为什么MongoDB使用B-Tree?
- spark入门_[大数据之Spark]——快速入门
- mac下如何把本地项目上传到Github
- 汇编语言程序设计-钱晓捷(第五版)学习笔记目录
- linux搜狗输入法皮肤,Ubuntu 12.04下安装搜狗拼音 + 安装搜狗皮肤
- 计算机网络——网络应用(上)
- 【机器学习】详解 TF-IDF 与 TF-IWF
- 如何跨网络远程操作另一台计算机,如何远程控制另一台电脑?
- VMware上Ubuntu实现和windows复制粘贴
- 预制菜开启春节之战,破局立新正在进行时
- win10链接无线打印服务器,win10系统无法添加无线打印机的解决技巧
- 2021-04-28 Mac上插入公式的三种方法
热门文章
- TensorFlow 多任务学习
- 数据结构之最小生成树
- Effective Java~35. 用实例域代替序数
- Java加密与解密的艺术~RSA模型分析
- Replace Data Value with Object(以对象取代数据值)
- EasyMock 简介
- Java国际化资源绑定-----示例
- 外设驱动库开发笔记12:TSEV01CL55红外温度传感器驱动
- BigDecimal的异常记录:java.lang.ArithmeticException: Rounding necessary
- 现代软件工程 第四章 【结对编程】练习与讨论