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

时间:2013-12-05 09:27:04

标签: php jquery css3

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

// 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脚本: 这里是, chechUsername.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>

现在我想在语音泡沫中显示这个错误消息,任何人都有一个很好的解决方案或一个好的教程或一个解决我的问题的方法?问候!

1 个答案:

答案 0 :(得分: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;
});
});