提示框效果

一下是封装到 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. Deep learning与Neural Network

    深度学习是机器学习研究中的一个新的领域,其动机在于建立.模拟人脑进行分析学习的神经网络,它模仿人脑的机制来解释数据,例如图像,声音和文本.深度学习是无监督学习的一种. 深度学习的概念源于人工神经网络的 ...

  2. std::bind

    参考资料 • cplusplus.com:http://www.cplusplus.com/reference/functional/bind/ • cppreference.com:http://e ...

  3. kubernetes上安装MongoDB-3.6.5集群副本集方式

    一.安装部署: 想直接一步创建集群的小伙伴直接按以下步骤安装(再往后是记录自己出过的错): 1.生成docker镜像: docker build -t 144.202.127.156/library/ ...

  4. yii2使用 db log

    在本地测试的时候,输出log,还是输出到db中比较顺手. 配置过程: 1.加入log组件的配置: 'log' =>[ # 追踪级别 # 消息跟踪级别 # 在开发的时候,通常希望看到每个日志消息来 ...

  5. 【c++ primer, 5e】函数匹配

    练习 6.49 候选函数:与所调用的函数的名字相同的函数的集合. 可行函数:给候选函数加上参数数量.参数类型的约束所得到的函数的集合. 6.50 a 3.4可行,二义匹配 b 2.4可行,2是最佳匹配 ...

  6. BeanFactory与ApplicationContext

    本文总结自:https://www.cnblogs.com/xiaoxi/p/5846416.html 我们常说的Spring容器(即Spring Ioc 容器),是如何创建bean的? BeanFa ...

  7. 创建squashfs

    SquashFS 通常的livecd都有一个这个文件,是核心的文件系统 SquashFS 也是一个只读的文件系统,它可以将整个文件系统压缩在一起,存放在某个设备,某个分区或者普通的文件中.如果您将其压 ...

  8. Juniper SRX防火墙简明配置手册(转)

    在执行mit命令前可通过配置模式下show命令查看当前候选配置(Candidate Config),在执行mit后配置模式下可通过run show config命令查看当前有效配置(Active co ...

  9. Spring mvc异步处理

    基于Servlet3.0的异步处理,springmvc的异步处理 控制器返回callable, spring mvc异步处理,将callable提交到TaskExecutor  使用一个隔离线程进行执 ...

  10. LeetCode——Edit Distance

    Question Given two words word1 and word2, find the minimum number of steps required to convert word1 ...