php - 使用 jquery/css3 在语音气泡中显示错误消息

Question

嘿，现在我正在使用这个脚本来检查我的用户名字段中的输入:

// username-check
$(document).ready(function(){
    $("#username-field").keyup(function(event) {
        $.post("checkUsername.php", {
            username: $(this).val()
        }, 
        function(data) {
            $("#name-error").text(data.error ? data.error : "");
        }, "json");
    });
});

这个 jQuery 正在将输入的数据发送到另一个 php 脚本:这里是，chech用户名.php:

include "storescripts/connect_to_mysql.php";

require 'classes/UsernameChecker.php';

$config = array('DB' => $mysqli,
                'Table' => 'table',
                'Row' => 'row',
                'Output' => true,
                'Format' => 'JSON');

$usernameChecker = new UsernameChecker($config);

if(!empty($_POST['username'])) {
    if ($usernameChecker->check_regex($_POST['username'])) {    
        if($usernameChecker->check_length($_POST['username'])) {
            if (!$usernameChecker->check($_POST['username'])) {
                echo json_encode(array("error" => "Username already taken"));
            } else {
                echo json_encode(array("error" => "Username available"));
            }
        } else {
            echo json_encode(array("error" => "Username too long"));
        }
    } else {
        echo json_encode(array("error" => "Allowed symbols: a-z , A-Z , 1-9 and \"_\""));
    }
} else { 
    echo json_encode(array("error" => "Type username"));
}

根据输入，我创建了一些错误消息。这些错误消息显示在:

<span class="error" id="name-error"></span>

现在我想在语音气泡中显示此错误消息，有人有好的解决方案或好的教程或 jsfiddle 来解决我的问题吗？问候!

Answer 1

你可以使用div来弹出。

$(document).ready(function() {

// Here we will write a function when link click under class popup                 
$('a.popup').click(function() {


// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link                          
var popupid = $(this).attr('rel');


// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();


// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

// Now here we need to have our popup box in center of 
// webpage when its fadein. so we add 10px to height and width 
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : 0,
'margin-left' : -popupleftmargin
});
return false;
});


// Now define one more function which is used to fadeout the 
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {


// Add markup ids of all custom popup box here                        
$('#fade , #popuprel , .close, .popupbox').fadeOut()
return false;
});

$('.close').click(function() {


// Add markup ids of all custom popup box here                        
$('#fade , #popuprel , .close, .popupbox').fadeOut()
return false;
});
});