公用提示框写法

toast: function(msg) {
var str = "<div class=‘toast‘ style=‘display:none‘>" + msg + "</div>";
$(‘body‘).append(str);
$(‘.toast‘).stop().fadeIn(100).delay(1000).fadeOut(400); //fade out after 3 seconds
setTimeout(function() {
$(‘.toast‘).remove();
}, 1500);
}

.toast {
width: 200px;
height: 20px;
position: fixed;
left: 50%;
margin-left: -110px;
top: 50%;
margin-top: -10px;
background-color: #383838;
color: #F0F0F0;
padding: 5px 10px;
text-align: center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
opacity: 0.8;
z-index: 999;
}

时间: 2024-11-29 02:54:18

公用提示框写法的相关文章

【iOS开发-56】案例BUG:按钮的enabled、控件的userInteractionEnabled以及两种提示框UIAlert和UIActionSheet

接上述案例找BUG:[iOS开发-51]案例学习:动画新写法.删除子视图.视图顺序.延迟方法.按钮多功能用法及icon图标和启动页设置 (1)BUG:答案满了就不能再点击option按钮,答案没满就能点. 在optionClick方法的if(full)中设置,即判断答案是否满了,如果满了,则: if (full) { //如果答案满了,不管是否正确,只要满了,下面的option按钮就不能被点击 for (UIButton *optionBtn in self.optionView.subview

【iOS开发-56】案例BUG:button的enabled、控件的userInteractionEnabled以及两种提示框UIAlert和UIActionSheet

接上述案例找BUG:[iOS开发-51]案例学习:动画新写法.删除子视图.视图顺序.延迟方法.button多功能使用方法及icon图标和启动页设置 (1)BUG:答案满了就不能再点击optionbutton,答案没满就能点. 在optionClick方法的if(full)中设置,即推断答案是否满了,假设满了.则: if (full) { //假设答案满了,无论是否正确,仅仅要满了,以下的optionbutton就不能被点击 for (UIButton *optionBtn in self.opt

利用before、after制作提示框

提示框由两部分组成,框+箭头,箭头则利用伪元素before.after写成. 根据提示框的样式可以看出,上面的箭头由两部分组成:灰色大箭头+蓝色小箭头,蓝色嵌套在灰色里面,于是箭头就有了边框,整体搭配起来也比较好看. 那么这部分是怎么写的呢? 首先把箭头以外的部分写出来,下面是html代码以及它的css样式: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

【lushengduan】02、Activity的基本认识 如何弹出一条Toast提示框

一.Activity的简要理解 上篇博文已经知道如何编写一个简单的Activity了,可能有很多初学者会疑惑到底什么是Activity?我们来给出Activity的一个通俗的解释:Activity就是呈现在我们手机上的各种界面,也就是说,只要在手机上我们能看到的,都是Activity.任何一个Activity都需要继承android.app.Activity才能有显示界面的“本领”,当一个类继承自android.app.Activity,那么系统就会为其分配一个透明的布满手机屏幕的PhoneWi

css伪元素实现tootip提示框

先看效果 废话不说,直接上图,看看今天要做的是什么: 实现原理 这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠.遮盖,或者干脆用图片,也能实现,但那样就没有讨论的意义了.今天要说的是用css的伪元素实现:before 和 :after .伪元素顾名思义就是html标签中不存在的元素,是用css“虚拟”出来的.这样对一个div标签来说就活生生的多出了两个(伪)元素.一个在前,一个在后.控制这两个伪元素的大小.位置.边框.圆角.层级就能实现多种多样的效

微信小程序-提示框

提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }) setTimeout(function(){ wx.hideToast() },2000) w

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点. 1.Bootstrap对话框的使用 常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,B

Android安卓---Hellword 简单提示框

添加公用单元文件com..java package com.example.myapplication; import android.app.AlertDialog; import android.content.Context; import android.widget.Toast; public class com { //提示信息 public static void ShowMsg(String msg,Context context) { AlertDialog.Builder d

React练习 6 :记住密码提示框

需求:鼠标mouseoverj时显示提示框,mouseoutj地隐藏 import React,{useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function Tips(props){ const [isShow,setShow]=useState(false); return( <div id="outer"> <label onM