提示弹框

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>提示弹框</title>
        <style type="text/css">
　　　　　　*,*::before,*::after{box-sizing:border-box;}

　　　　　　.body{ display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100vh; border:0px solid red;}

　　　　　　.tooltip { position: relative; background:#999999; padding: 5px 12px; margin: 5px; font-size: 15px;  color: #FFF; }
　　　　　　.tooltip:before,
　　　　　　.tooltip:after { position: absolute; content: ‘‘; opacity: 0; transition: all 0.4s ease; }

　　　　　　.tooltip:before { top: -22px; transform: translateY(20px); z-index:2; content: ""; width: 12px; height: 12px; display: block; background-color: whitesmoke; border-right:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd; }
　　　　　　.tooltip:after { content: attr(data-tooltip); background:whitesmoke; color:#333333; width: 160px; height: 40px; font-size: 13px; font-weight: 300; top: -54px; left: -90px; padding: 10px; border-radius: 5px; letter-spacing: 1px; transform: translateY(20px);     box-shadow: 1px -1px 5px rgba(0,0,0,0.2); border:1px solid #bdbdbd; z-index:-1;}

　　　　　　.tooltip:hover::before,
　　　　　　.tooltip:hover::after { opacity: 1; transform: translateY(-2px); }
　　　　　　.tooltip:hover::before{transform:rotate(45deg);  }
        </style>
    </head>

    <body class="body">
        <span class="tooltip" data-tooltip="不能发送空白信息">发送</span>
    </body>
</html>

原文地址：https://www.cnblogs.com/jiunie/p/11792040.html

时间： 2024-10-08 05:32:12

提示弹框的相关文章

JS 信息提示弹框封装

// 功能提示弹框 function tipsBox ( option ) { var html = ''; if ( option.type == 'success' ) { html += '<div class="message-box-body" data-type="success">'+ option.message +'</div>'; } else if ( option.type == 'error' ) { html +=

已解决：PLSQL Developer的错误提示弹框的文本乱码问题

问题:Windows7中文环境下,PLSQL Developer的错误提示弹框文本为乱码解决过程:1.使用SELECT * FROM v$nls_parameters;查询得知服务器的字符集编码为: NLS_LANGUAGE=SIMPLIFIED CHINESE NLS_CHARACTERSET=AL32UTF82.因为自己服务器不在自己本地,而是通过客户端远程连接,所以注册表里无Oracle相关注册项,无法修改注册表信息解决问题:3.修改环境变量,在计算机-右键属性-高级系统设置-环境变量中

弹框组件

因为项目中使用的较多,因此封装了一个组件,便于使用. /* *@file 弹框组件 *@description 用于所有提示弹框 *@time 2016/11/29 */ function PopModel(options) { var that = this; this.defaults = { width: '100px', // 默认框 height: '120px', // 默认高 isMask: true, // 是否遮罩 dir: 'mid', // mid中间,left左下,rig

JS 功能弹框封装

// 功能提示弹框 function messageBox ( option ) { var html = ''; html += '<div class="message-box-head">' + option.title; html += '<i class="icon iconfont message-close"></i></div>'; if ( option.type == 'using' ) { ht

RN code push自定义弹框

最近在弄react native的code push热更新问题.开始是用的后台默默更新配置.由于微软服务器速度问题,经常遇到用户一直在下载中问题.而用户也不知道代码需要更新才能使用新功能,影响了正常业务流程.而目前公司也无力搭建自己的服务器和dns设置.所以比较快速的方案就是,前端自定义热更新弹框,在需要更新代码的情况下禁止用户向下操作. ok,废话少说,直接上代码: 这是构建一个弹框,强制文案提示和非强制文案提示弹框. /** * Created by susie on 2018/9/20.

弹框提示用户输入

在很多页面,都会有提示用户输入账号和密码的弹框.并保障用户的良好体验效果. <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <style type="text/css"> body{ back

CreateProcessAsUser,C#写的windows服务弹框提示消息或者启动复杂的UI界面的子进程

服务(Service)对于大家来说一定不会陌生,它是Windows 操作系统重要的组成部分.我们可以把服务想像成一种特殊的应用程序,它随系统的“开启-关闭”而“开始-停止”其工作内容,在这期间无需任何用户参与.Windows 服务在后台执行着各种各样任务,支持着我们日常的桌面操作.有时候可能需要服务与用户进行信息或界面交互操作,这种方式在XP 时代是没有问题的,但自从Vista 开始你会发现这种方式似乎已不起作用. 现在有个需求需要服务程序弹框提示和启动包含复杂UI的桌面程序,"穿透Sessio

Dynamics CRM2016 关闭错误报告弹框提示

在之前的版本中错误报告的弹框提示是可以在隐私首选项中设置关闭的,如下图所示但是在2016中这个设置没了有人说在右上角的选项中设置,但那个只能是设置个人的无法修改系统级别的.在系统中找了半天还是没有找到可以设置的地方,既然前台没有入口那只有打后台的主意了,打开组织数据库中的Organization表,将ReportScriptErrors字段的值修改为3(默认值是0)即为关闭.

四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们的需求,下面我简单介绍一些常见的四种提示弹出框(success,loading,error,warning),我分别用原生JavaScript和jQuery来介绍分享给各位博友! 一.首先介绍原生JavaScript来实现四种提示弹出框: 第一步:先看看html的建立 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: