提示框效果

一下是封装到 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. 如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果

    今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...

  2. OS知识点总结

    转自:https://blog.csdn.net/csdn_chai/article/details/78002202 1.什么是操作系统? OS是用户与硬件之间的接口,管理计算机的软件和硬件资源. ...

  3. sublime2常用设置

    设置文本字体格式 • Preferences -> Setting-User • 加入设置:"font_face" : "courier new", &q ...

  4. 转:在0~N(不包括N)范围内随机生成一个长度为M(M <= N)且内容不重复的数组

    1. 最朴素暴力的做法. void cal1() { , j = , num = ; int result[M]; result[] = rand() % N; //第一个肯定不重复, 直接加进去 ; ...

  5. CCF 工资计算

    思路: 因为T<=10000,所以税前极限金额肯定不超过1000000(设个比较大的数字就行),然后逐一计算即可. #include<cstdio> int main() { int ...

  6. JavaScript-dom4 date string 事件绑定

    内置date <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. [HZNUOJ] 博

    Description 定义一个数字序列为“非下降序列”: 此处我们约定用$n\;表示数字序列的长度,下面定义在n \in [1, \infty]时有效$ $if \;\; n = 1:$ $\;\; ...

  8. 2017浙江省赛 D - Let's Chat ZOJ - 3961

    地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3961 题目: ACM (ACMers' Chatting Messe ...

  9. 带你走进AJAX(1)

    ajax是什么? (1)ajax (asynchronouse javascript and xml) 异步的javascript 和xml (2)ajax是一个粘合剂,将javascript.xml ...

  10. zookeeper No route to host

    2017-10-12 07:25:59,270 [myid:1] - WARN [QuorumPeer[myid=1]/0:0:0:0:0:0:0:0:2181:QuorumCnxManager@36 ...