页面控件自定义错误提示框

痛定思痛。 2022-07-16 00:47 224阅读 0赞

最近又做回web前端的项目，使用的框架没有太多的功能，类似Message，错误提示，等等都需要自己手写，于是，就手动一个错误提示的方法，供大家参考。

.infotip {
    	margin-top: 10px;
    	position: absolute;
    	display: inline-block; //限制长度
    	height: 30px;
    	line-height: 32px;
    	background: white;
    	box-shadow: 1px 2px 3px red; //阴影部分
    	border: 1px solid red;
    	border-radius: 4px; /圆角
    	text-align: center;
    	color: red;
    	padding: 2px; //
    }
    
    // 小三角
    .navtip {
    	position: absolute; //可以脱离父层
    	top: -6px;
    	left: 15px;
    	overflow: hidden;
    	width: 10px;
    	height: 10px;
    	background: white;
    	border-left: 1px solid red;
    	border-top: 1px solid red;
    	-webkit-transform: rotate(45deg); //旋转45度
    	-moz-transform: rotate(45deg);
    	-o-transform: rotate(45deg);
    	transform: rotate(45deg);
    }
    
    
    //message tip
    function messageTip(obj , msg) //obj 控件id
    {
    	$(obj).css('outline','2px solid red') //红框
    	$(obj).focus(); //焦点
    	$('body').append("<div id='tipDiv' class='infotip'><span id='spanTip'></span><div class='navtip'></div></div>");
        $('#tipDiv').show().css("left", $(obj).offset().left + $(obj).width() + 'px').css("top", $(obj).offset().top + 26 + 'px').css('z-index', '9999'); //相对于控件的位置
        $('#spanTip').html(msg); //错误内容
        $(obj).blur(function () { //获得焦点时错误信息消失
        	$(obj).removeAttr("style"); 
        	$('#tipDiv').remove();
        });
    }

发表评论取消回复

表情：

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

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

相关阅读

相关中级控件——复选框CheckBox——自定义控件CheckBox

使用有自定义图标的CheckBox： ![3eb4d4df1587792d7348faaeb51e4a15.png][] Button按钮的背景在正常情况下是凸起的，在按下

男娘i/ 2023年09月28日 14:26/ 0 赞/ 405 阅读

相关页面控件自定义错误提示框

最近又做回web前端的项目，使用的框架没有太多的功能，类似Message，错误提示，等等都需要自己手写，于是，就手动一个错误提示的方法，供大家参考。 .infotip

痛定思痛。/ 2022年07月16日 00:47/ 0 赞/ 225 阅读

相关自定义组合控件：下拉选择框

Spinner 自定义组合控件之下拉选择框 ![SouthEast][] 项目概述下拉选择框主要是通过在EditText 下用PopupWindow 动态显示L

素颜马尾好姑娘i/ 2022年07月12日 18:09/ 0 赞/ 364 阅读

相关 Android自定义控件之自定义组合控件（一）

[Android自定义控件之基本原理][Android] 前言：在日常的Android开发中会经常和控件打交道，有时Android提供的控件未必能满足业务的需求，

客官°小女子只卖身不卖艺/ 2022年07月12日 03:49/ 0 赞/ 565 阅读

相关 Android自定义控件之自定义组合控件（三）

前言：前两篇介绍了自定义控件的基础原理[Android自定义控件之基本原理（一）][Android]、自定义属性[Android自定义控件之自定义属性（二

亦凉/ 2022年07月12日 03:49/ 0 赞/ 465 阅读

相关 spring boot中自定义错误提示页面

springboot技术学习 [https://www.itkc8.com][https_www.itkc8.com] 当程序出错的时候，比如500错误，当用户输入的url错

超、凢脫俗/ 2022年05月20日 02:50/ 0 赞/ 232 阅读

相关 android - 自定义（组合）控件 + 自定义控件外观

Android自定义View实现很简单继承View，重写构造函数、onDraw，（onMeasure）等函数。如果自定义的View需要有自定义的属性，需要在values

谁践踏了优雅/ 2021年12月20日 06:27/ 0 赞/ 617 阅读

相关自定义控件

MVC设计模式： ![1535996-20190729180410522-155427013.png][] 自定义控件：（自己写一个View 命名：前缀+类名） 1.系统

﹏ヽ暗。殇╰゛Y/ 2021年10月29日 09:14/ 0 赞/ 542 阅读

相关自定义控件

目录引入布局创建自定义控件 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

电玩女神/ 2021年09月28日 06:56/ 0 赞/ 673 阅读

相关自定义控件添加属性_Duilib 自定义控件通过xml自定义控件可自定义属性等

首先创建一个 HEToolsItem.xml ![a500af5790dfc48aa701b2fd861a1658.png][] 内容很简单就一个Button + 一个

以你之姓@/ 2021年09月07日 06:02/ 0 赞/ 645 阅读