jquery prompt box

Drop-down balloon

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;
}

Middle prompt box

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)

Guess you like

Origin blog.csdn.net/weixin_49295874/article/details/114830077