HTML简单的提示框
由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的HTML方法。
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function show(obj,id) {
var objDiv = $("#"+id+"");
/**
这里我们可以使用ajax从数据库获取数据动态改变提示框里的内容
$.post('./test.php',{act:"ajax_get_ifo", goods_id:goods_id}, function (res){
objDiv.html("<br>"+res.data+"<br>");
}, 'json');
**/
$(objDiv).css("display","block");
// e=e||window.event; // 兼容firefox
$(objDiv).css("left", 0); // 初始化,防止叠加
$(objDiv).css("top", 0);
var e = window.event || arguments.callee.caller.arguments[0];
$(objDiv).css("left", e.clientX + 30);
$(objDiv).css("top", e.clientY - 45);
}
function hide(obj,id) {
var objDiv = $("#"+id+"");
$(objDiv).css("display", "none");
}
</script>
<div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:gray;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.7;">
提示1效果
</div>
<div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 1.0;">
不知道你们在干嘛呢,<br/>哈哈哈哈
</div>
<a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>
<br><br><br><br><br>
<a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a>
这个提示框框,丑是丑了点,但是可以救急!
HTML简单的提示框的更多相关文章
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- Android:Toast简单消息提示框
Toast是简单的消息提示框,一定时间后自动消失,没有焦点. 1.简单文本提示的方法: Toast.makeText(this, "默认的toast", Toast.LENGTH_ ...
- Android 入门第一课 一个简单的提示框
1.打开Android开发环境Eclipse来到主界面 2.新建一个安卓项目 File->New->Android Application project 在上面有红色错误的地方填上应用程 ...
- css伪元素实现tootip提示框
先看效果 废话不说,直接上图(请把鼠标移到我的头像上),看看今天要做的是什么: 实现原理 这些提示框原理都是一样的,且只需一个div标签就能实现,当然也有笨方法,比如用多个标签相互重叠.遮盖,或者干脆 ...
- js 提示框的实现---组件开发之(一)
自己做了一个简单的提示框,供自己使用,也可以供他人参考,看懂此文,是理解组件开发的入门 思路比较简单: 1.常规写法: 1.1. 创建一个构造函数 1.2. 给构造函数的原型对象添加show 和hid ...
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- 【js+jquery】通用、简单的JS 提示框
1.该插件不需要依赖 jquery,仅仅使用了原生js 2.简单.通用.可自定义修改样式.支持等待N秒消失.支持消失后跳转其他url , 功能还是比较完善的. 3.不废话,上代码: (我存放的位置在 ...
- jquery 实现一个简单的成功提示框,失败提示框
主要的jquery代码:var TS={ successAlert:function(str){ //调用成功的方法 var html='<div class="alert alert ...
随机推荐
- poj-3659 Cell Phone Network(最小支配集+贪心)
http://poj.org/problem?id=3659 Description Farmer John has decided to give each of his cows a cell p ...
- LGOJ4450 双亲数
Description link \[\sum \limits_{i = 1}^A \sum \limits_{j = 1}^B [ \gcd(i, j) = d] \] 要\(O(\sqrt n)\ ...
- Linux安装vmtools工具
1.vmware菜单中虚拟机下安装vmtools: 2.将/mnt/cdrom/下的文件copy至可读写的文件夹下,此处我选择downloads目录下(如果提示此文件夹只为可读文件夹时) 3.使用ta ...
- TCP与UDP 笔记
本文整理自:<图解TCP/IP 第5版>作者:[日] 竹下隆史,[日] 村山公保,[日] 荒井透,[日] 苅田幸雄 著译者:乌尼日其其格出版时间:2013-07 TCP提供可靠的通信传输, ...
- 机器人可以拥有社交智能吗?——微软雷德蒙研究院院长Eric Horvitz与他的个人虚拟助理之梦
Horvitz与他的个人虚拟助理之梦" title="机器人可以拥有社交智能吗?--微软雷德蒙研究院院长Eric Horvitz与他的个人虚拟助理之梦">编者按:到 ...
- mysql索引详细介绍
博客: https://blog.csdn.net/tongdanping/article/details/79878302#%E4%B8%89%E3%80%81%E7%B4%A2%E5%BC%95% ...
- vue-cli多页面应用常遇到的问题
1.TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor 此问题出现在webpack 3中,解决办法很简单,将oc ...
- 原创:CentOS 环境中 Zabbix 3.4 的安装部署实践
IT管理工作中,如果没有对服务器.网络设备.服务.进程.应用等的监控,往往是用户发送问题报告后才知道出了问题.事后救火显得被动,不能从容面对问题. 才有了部署一套网络监控系统的想法,机缘巧合下结识了Z ...
- idea 使用sonarlint报错解决方案
在idea使用sonarlint可能出现以下报错: Plugin 'org.sonarlint.idea' failed to initialize and will be disabled. Ple ...
- Laravel 队列使用
触发 任务的触发,主要的实现是在IlluminateFoundationBusDispatchesJobs这个trait中实现的,其只包含两个方法 protected function dispatc ...