[英]Position div at the bottom right of input
I need to put the alert div position at the right corner of each input when created. 创建时,我需要将Alert div位置放在每个输入的右上角。
This is the function that creates the alert 这是创建警报的功能
function createAlert(inputName,errorNumber){
var lang = getUrlParameter('lang');
var alertText = {
error0: {
pt: "Erro",
en: "Error",
},
error2: {
pt: "O nome de usuário já está em uso",
en: "The Username already is being used",
},
error3: {
pt: "O endereço eletrónico já está em uso",
en: "The Email already is being used",
},
error4: {
pt: "O endereço eletrónico é inválido",
en: "The Email inserted is invalid",
},
error5: {
pt: "A password não coincide",
en: "The passwords doesn't match",
}
}
var alert ="<div class='alert' id='error"+errorNumber+"'><span class='alertCloseBtn' onclick='this.parentElement.style.display=\"none\";'>×</span>"+alertText["error"+errorNumber][lang]+"</div>";
if(typeof $('#error'+errorNumber)[0] == 'undefined'){
$('input[name='+inputName+']').after(alert);
}else{
$('#error'+errorNumber).remove();
$('input[name='+inputName+']').after(alert);
}
}
This is a javascript solution that will work better then css. 这是一个比CSS更好的javascript解决方案。
Read the comment to understand 阅读评论以了解
var alert = $("<div class='alert'><span class='alertCloseBtn' onclick='this.parentElement.style.display=\\"none\\";'>×</span>this is error</div>"); var inputName= "sd" $('input[name='+inputName+']').after(alert); // here is to position the alert dynamicly. this is better then css where css dose not work sometimes and get a wrong positions var rect = $('input[name='+inputName+']')[0].getBoundingClientRect(); // input position // now position the alert box under the input alert.css({"left": rect.left, top:rect.height + rect.top , position:"absolute", "min-width": rect.width});
.alert { min-height:100px; border:1px solid red; } div{ margin:auto; width:200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="text" name="sd" value="" /> <div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.