分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

jquery 实现一个简单的成功提示框,失败提示框

发布时间:2023-09-06 01:26责任编辑:胡小海关键词:暂无标签
主要的jquery代码:

var TS={ ?successAlert:function(str){ //调用成功的方法 ???var html=‘<div class="alert alert-success ts-alert" >‘ ????????????+‘<span class="ts-alert-text">‘+str+‘</span>‘ ???????????+‘<button type="button" class="close"><span>×</span></button></div>‘; ???????????????var obj=$(html); ???obj.appendTo(document.body); ????var w=obj.width(); ???if(w>1) w=w/2; ???//提示框居中显示 ???obj.css("margin-left", "-"+w+"px"); ???//延时自动关闭 ???setTimeout(function () { ??????obj.remove(); ???}, 3000); ????????????????????}, ?errorAlert:function(str){ //调用失败的方法 ???var html=‘<div class="alert alert-danger ts-alert" >‘ ????????????+‘<span class="ts-alert-text">‘+str+‘</span>‘ ???????????+‘<button type="button" class="close"><span>×</span></button></div>‘; ????????????????????var obj=$(html); ???obj.appendTo(document.body); ????var w=obj.width(); ???if(w>1) w=w/2; ???obj.css("margin-left", "-"+w+"px"); ???setTimeout(function () { ??????obj.remove(); ???}, 3000); ????????????}, ?loadingAlert:function(str){ ????$(‘<div class="alert alert-info ts-alert" >‘+str+‘</div>‘).appendTo(document.body); ?}, ?removeAlert:function(obj){ ???$(obj).remove(); ?}}$(function(){ ???$(document).on("click",".close",function(){ ???var obj=$(this).parents(".ts-alert"); ???obj.remove(); ?}); ?});

 主要的css样式:

/*****tsalert提示窗******/.ts-alert{ ?position:fixed; ?top:50px; ?left:50%; ?z-index:999; ?white-space: normal; ?min-width: 200px; ?text-align: center; ?padding: 15px; ?padding-right: 15px; ?margin-bottom: 20px; ?border:1px solid #e0e0e0; ?border-radius: 4px; ?box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); }.ts-alert-text{ ?text-align:center; ?font-weight:bold; ?white-space: normal; ?line-height:24px; ?}button.close { ???-webkit-appearance: none; ???padding: 0; ???cursor: pointer; ???background: 0 0; ???border: 0; ???float: right; ???font-size: 21px; ???font-weight: 700; ???line-height: 1; ???text-shadow: 0 1px 0 #fff; ???color:#222; ???margin-left:5px; ???line-height:26px;}

  实现的效果:

用户可以点击×来去除提示框,也可以等到一定时间自动消失,自动消失时间可以自己设置,采用的是settimeout方法。

方法调用为:TS.successAlert("关联模板成功!");其中需要显示的内容可以自己修改 。

jquery 实现一个简单的成功提示框,失败提示框

原文地址:http://www.cnblogs.com/opel/p/7872520.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved