提示框效果

一下是封装到 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. Spark2.x AFTSurvivalRegression算法

    Spark2.0的机器学习算法比之前的改变最大的是2.0基本采用了dataframe来实现的,但之前的都是用的RDD,看官网说貌似在3.0的时候RDD就不用了!还有一个就是hiveContext和sq ...

  2. macOS Sierra上ssh免密码登录linux服务器

    1.生成私钥文件 在客户端终端下输入以下命令 ssh-keygen -t rsa 每次执行 ssh-keygen -t rsa 产生的私钥文件都会不同 如果文件"~/.ssh/id_rsa& ...

  3. 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016) B - Bribing Eve

    地址:http://codeforces.com/gym/101174/attachments 题目:pdf,略 思路: 把每个人的(x1,x2)抽象成点(xi,yi). 当1号比i号排名高时有==& ...

  4. iOS 关于BTC 一些知识点

    1.BTC 用这个网 可以校验 自己的库生成的助记词 地址 是否是合法正常的 https://iancoleman.io/bip39/ 2.知晓 BTC 钱包是否有钱 和交易记录 https://te ...

  5. 简单地理解HTTPS 转

    原文地址:http://www.nowamagic.net/librarys/veda/detail/2394 我们都知道HTTPS能够加密信息,以免敏感信息被第三方获取.所以很多银行网站或电子邮箱等 ...

  6. iOS开发之HelloKitty(移动社交平台项目)

    iOS开发之HelloKitty(移动社交平台项目,2015.3,parishe)

  7. Linux各目录缩写含义

    Unix已经有35年历史了.许多人认为它开始于中世纪,这个中世纪是相对于计算机技术的产生和发展来说的.在过去的时间里,Unix和它的子分支Linux收集有许多的历史和一些完全古老的语言.在这篇技巧文章 ...

  8. CSS Dimension（尺寸）

    CSS Dimension(尺寸) 一.简介 CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允许你增加行间距. 二.Dimension(尺寸)属性值 三.示例 (1)示 ...

  9. xxxx interview问题解读与总结

    1. 要使线程从running到waiting状态,我们需要做些什么? 线程的状态及转换. 关联技术:http://www.cnblogs.com/kisf/p/6952524.html 2. spr ...

  10. go基础语法

    定义变量: 可放在函数内,或直接放在包内使用var集中定义变量使用:=定义变量写的短一些 package main import ( "fmt" "math" ...