提示框效果

一下是封装到 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.0机器学习系列之4：Logistic回归及Binary分类（二分问题）结果评估

    参数设置 α: 梯度上升算法迭代时候权重更新公式中包含 α :  http://blog.csdn.net/lu597203933/article/details/38468303 为了更好理解 α和 ...

  2. django 使用form验证用户名和密码

    form验证可以减少查询数据库,所以代码先预先验证,有问题可以返回给前端显示 1.在users文件夹下新建forms.py文件,用来验证用户名和密码是否为空,密码长度是否大于6 # -*- codin ...

  3. python字符串的操作（去掉空格strip()，切片，查找，连接join()，分割split()，转换首字母大写， 转换字母大小写...）

    #可变变量:list, 字典#不可变变量:元祖,字符串字符串的操作(去掉空格, 切片, 查找, 连接, 分割, 转换首字母大写, 转换字母大小写, 判断是否是数字字母, 成员运算符(in / not ...

  4. vueRouter点击打开新页签

    一.vue 路由使用 vue是单页面SPA,一般我们使用vue-router 设定路由进行页面跳转的时候,都是直接覆盖当前页面.比如,在a页面中有如下超链接 <router-link to=&q ...

  5. 2017 Multi-University Training Contest - Team 4 hdu6071 Lazy Running

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6071 题目: Lazy Running Time Limit: 2000/1000 MS (J ...

  6. Centos编译安装 LAMP （apache-2.4.7 + mysql-5.5.35 + php 5.5.8）+ Redis

    转载地址:http://www.cnblogs.com/whoamme/p/3530056.html 软件源代码包存放位置:/usr/local/src 源码包编译安装位置:/usr/local/软件 ...

  7. 微信开放平台--》网站应用开发 微信登录网站接口（https://open.weixin.qq.com/）

    地址:https://open.weixin.qq.com/ 手册:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&am ...

  8. asp.net发送短信

    public class SmsServiceManager { public static string Send(string PhoneNumber, out string sendNo) { ...

  9. BeanFactory与ApplicationContext

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

  10. 20145321 《Java程序设计》第10周学习总结

    20145321 <Java程序设计>第10周学习总结 教材学习内容总结  网络编程:网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据传输. IP地址:为了能够方便的识别网络上 ...