提示框效果

一下是封装到 Jquery.L.Message.js 中的JS文件内容

var returnurl = '';

var messagebox_timer;

$.fn.messagebox = function (message, url, type, delay) {

clearTimeout(messagebox_timer);

$("#msgprint").remove();

var m_body = $(this);

delay = (typeof delay == "undefined" ? 5000 : delay);

returnurl = url;

var box_style = 'position:absolute;display:none;z-index:1000;padding:10px 30px 10px 40px;';

switch (type) {

case 1: box_style += 'border:1px solid Green;color:#090;background:url(../Icons/ok.png) 10px 10px no-repeat #F1FEF2;'; break;

case 0: box_style += 'border:1px solid Red;color:#EE1010;background:url(../Icons/error.png) 10px 10px no-repeat #FDF8E8;'; break;

default: box_style += 'border:1px solid Orange;color:Orange;background:url(../Icons/warning.png) 10px 10px no-repeat #FEFDE9;'; break

}

var str = "<div id=\"msgprint\" style=\"" + box_style + "\">" + message + "</div>"; m_body.append(str);

var dom_obj = document.getElementById("msgprint");

var ext_width = $("#msgprint").width();

dom_obj.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - dom_obj.offsetHeight - $("#msgprint").height()) / 2) + "px";

dom_obj.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - dom_obj.offsetWidth - $("#msgprint").width()) / 2) + "px";

$("#msgprint").fadeIn(1000, function () { messagebox_timer = setTimeout(messagebox_out, delay) });

};

function messagebox_out() {

if (returnurl == undefined || returnurl == '') { $("#msgprint").fadeOut(1000) }

if (returnurl == "back") { this.history.back(-1) } else if (returnurl != "" && returnurl != undefined) { this.location.href = returnurl }

}

　　引用的js文件：

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script src="Scripts/Jquery.L.Message.js" type="text/javascript"></script>

　　调用代码

<body>

    <div id="hello" style="height: 350px;">

    <ul>

    <li><a href="javascript:$('#hello').messagebox('成功提示<br/>成功提示', 'http://localhost:5083/', 1, 20000);">成功，20秒后跳转</a></li>

    <li> <a href="javascript:$('#hello').messagebox('错误提示<br/>错误提示', '', 0, 1000);">失败，1秒消失</a></li>

    <li> <a href="javascript:$('body').messagebox('这是警告<br/>这是警告', 'back', 2);">警告，默认时间5秒后后退</a></li>

    </ul>

    </div>

</body>

　　

基于JQuery 的消息提示框效果代码的更多相关文章

  1. 基于jquery的消息提示框toastr.js

    //消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...

  2. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  3. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

  4. Jquery右下角消息提示框

    找了好久,终于找到一个不错的提示框jquery,免费给大家一起用下吧(可是花了我很多积分哦),顺便重写了一下样式,原来的样式真的不敢恭维啊... 下载地址:http://files.cnblogs.c ...

  5. TIPSO--基于JQUERY的消息提示框插件，用起来蛮顺手

    项目产品经理要求, 呵呵,关于描述,十个字以内的,直接显示,多于十个字的,用消息框提示: 相关模板及JS如下: $(function() { $('.tip').tipso({ useTitle: f ...

  6. 基于jQuery消息提示框插件Tipso

    今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览   ...

  7. 基于jQuery Tooltips悬停提示效果

    基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览   源码 ...

  8. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

  9. 精美舒适的对话消息提示框--第三方开源--SweetAlertDialog

    SweetAlertDialog(sweet-alert-dialog)是一个套制作精美.动画效果出色生动的Android对话.消息提示框 SweetAlertDialog(sweet-alert-d ...

随机推荐

  1. wordpress 自己制作子主题 child theme

    使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题 在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一 ...

  2. Jmeter添加变量的四种方法

    一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...

  3. 详解MySQL第一篇—MySQL简要介绍及DDL语句

    背景:近几年,开源数据库逐渐流行起来.由于具有免费使用.配置简单.稳定性好.性能优良等优点,开源数据库在中低端应用上占据了很大的市场份额,而 MySQL 正是开源数据库中的杰出代表.MySQL 数据库 ...

  4. phpstudy2016 redis扩展 windows

    第一步,查看环境的信息. 第二步,根据线程是否安全.架构32位或64位下载redis扩展. http://pecl.php.net/package-stats.php 第三步,php_redis.dl ...

  5. Delphi APP 開發入門（二）Android/iOS設定，Hello World

    Delphi APP 開發入門(二)Android/iOS設定,Hello World 分享: Share on facebookShare on twitterShare on google_plu ...

  6. C# 使用 Windows API 发送文件到打印机

    最近需要做一个打印的功能,于是在网上找到了这么一个方法. [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Ansi)] public cl ...

  7. POJ - 2125 Destroying The Graph (最小点权覆盖)

    题意:给一张图,现在要删去所有的边,删去一个点的所有入边和所有出边都有其对应\(W_{i+}\)和\(W_{i-}\).求删去该图的最小花费,并输出解 分析:简而言之就是用最小权值的点集去覆盖所有的边 ...

  8. 【android】 中文URL资源找不到的问题

    在博客园安卓客户端时,遇到过中文资源找不到的问题 背景:在使用PICASSO的时候,遇到过中文路径加载失败.比如 https://images0.cnblogs.com/news_topic/携程.j ...

  9. 论文笔记：CNN经典结构1（AlexNet，ZFNet，OverFeat，VGG，GoogleNet，ResNet）

    前言 本文主要介绍2012-2015年的一些经典CNN结构,从AlexNet,ZFNet,OverFeat到VGG,GoogleNetv1-v4,ResNetv1-v2. 在论文笔记:CNN经典结构2 ...

  10. pom.xml文件报错：web.xml is missing and <failOnMissingWebXml> is set to true

    这个错误原因是因为项目无法加载到web.xml,所以需要配置web项目的目录.具体解决,配置步骤如下: 1.右键项目属性,配置项目目录  /src/main/webapp,如果没有,新增一条 2.配置 ...