jquery提示框

亦凉 2022-11-09 12:49 243阅读 0赞

#### 下拉提示框 ####

function pointOut(errorData){ 
    	$("body").append("<div class='pointOut'>"+errorData+"</div>");
    	$(".pointOut").animate(
    		{ 
    			top:"2px"
    		}
    	,200,function(){ 
    		setTimeout(function(){ 
    			$(".pointOut").animate({ 
    				opacity:0
    			},400,function(){ 
    				$(".pointOut").remove()
    			})
    		},2500)
    		
    	})
    }
    pointOut("提示")

.pointOut{ 
    	background-color: red;
    	color: white;
    	text-align: center;
    	padding: 5px;
    	width: 98%;
    	border-radius: 6px;
    	display: inline-block;
    	position: fixed;
    	z-index: 9999;
    	top: -25px;
    	left: 1%;
    	font-size: 30px;
    }

#### 中间提示框 ####

var promptHint=new Function;
    promptHint.prototype.fun=function(parameter){ 
    	var str=parameter.str;	
    	var strDom='<div class="promptHint" style="position: fixed;width: 100%;height: 100%;top: 0;z-index: 9999;touch-action: none;">'+
    				'<div class="hint_bg" style="position: absolute;top: 0;width: 100%;height: 100%;background-color: #000000;opacity: 0.4;"></div>'+
    				'<div class="hint_cont" style="position: absolute;top: 50%;left:50%;margin:-40px 0 0 -60px;padding: 30px;background-color: white;border-radius: 12px;z-index: 9;">'+str+'</div>'+
    			'</div>'
    	$("body").append(strDom);
    	var hint_contLeft=$(".hint_cont").width();
    	$(".hint_cont").css("margin-left","-"+(hint_contLeft/2)+"px");
    	$(document).on("tap",".promptHint",function(e){ 
    		e.preventDefault();
    		e.stopPropagation();
    	})
    	
    	
    }
    promptHint.prototype.clear=function(){ 
    	$(".promptHint").remove();
    }
    var promptCue=new promptHint();
    promptCue.fun({ 
    		str:"请稍等..."
    });
    setTimeout(()=>{ 
    	promptCue.clear();
    },1000)

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 工具提示框（Tooltip）

可自定义的、可主题化的工具提示框，替代原生的工具提示框。如需了解更多有关 tooltip 部件的细节，请查看 API 文档 [工具提示框部件（Tooltip Widget）

待我称王封你为后i/ 2024年03月24日 17:57/ 0 赞/ 66 阅读

相关 JQuery弹出提示框定时自动消失

这是网络上的原始样式地址，感谢博主：[https://www.cnblogs.com/zhijiangch/p/7270109.html][https_www.cnblogs.

向右看齐/ 2023年06月30日 10:44/ 0 赞/ 3 阅读

相关 jquery提示框

下拉提示框 function pointOut(errorData){ $("body").append("<div class='pointOut'

亦凉/ 2022年11月09日 12:49/ 0 赞/ 244 阅读

相关 jquery 信息提示框对话框 div层实现

效果图： ![SouthEast][] 原网页地址：[http://tutorialzine.com/2010/12/better-confirm-box-jquer

亦凉/ 2022年09月20日 08:46/ 0 赞/ 221 阅读

相关 jQuery消息提示框插件Tipso

之前我们分享过很多漂亮的Tooltip提示框插件，比如这款带Tooltip表单验证的注册表单。今天要分享的这款jQuery消息提示框插件名叫Tipso，它的特点是

快来打我*/ 2022年08月05日 15:11/ 0 赞/ 265 阅读

相关 jQuery Ajax实现简单的搜索框提示功能

html： <DOCTTYPE!> <html lang="en-us"> <head> <meta charset='utf-8'>

Myth丶恋晨/ 2022年07月14日 03:38/ 0 赞/ 240 阅读

相关 jquery的搜索框输入提示页面

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="t

旧城等待，/ 2022年06月12日 00:44/ 0 赞/ 301 阅读

相关 Jquery实现淡入淡出自动消失的提示框，Jquery+css实现加载中提示框

浏览器原生弹出框太丑，且不能自动消失，可以使用Jquery自定义一个消失提示框。样式写法参考了bootstrap样式的编写方式。静态效果如下： ![70][]

柔情只为你懂/ 2022年05月16日 13:47/ 0 赞/ 919 阅读

相关 jquery.js+jquery.corner.js实现tooltip提示框

web2.0的发展促使web前端的快速发展，jquery是一个简单而优秀的ajax框架，通过它简单的可以实现跟多的web特效，以及ajax效果。何为提示框？当

电玩女神/ 2022年04月15日 00:13/ 0 赞/ 270 阅读

相关消息框-提示框

今天找到一个非常简单的提示消息弹出框直接上代码 html ![1500786-20181012154016519-1839245572.png][] css

迷南。/ 2021年09月29日 23:38/ 0 赞/ 490 阅读