1

尝试登录表单示例（编号 5）：

花式盒子

它似乎不起作用，单击以验证数据时它只是重新加载页面。据我了解，ajax 应该避免这种事情。

任何澄清将不胜感激，我相信这是一个相对简单的问题。

我实际上只是复制并粘贴了代码。“mail.php”目前并没有真正做任何事情，但首先我希望触发“#login_error”，当#login_name 和#login_pass 的长度小于1 时应该发生这种情况。就目前而言，页面刚刚刷新。

尽管如此，参考代码：js -

    $(document).ready(function() {

$("#tip5").fancybox({
    'scrolling'     : 'no',
    'titleShow'     : false,
    'onClosed'      : function() {
        $("#login_error").hide();
    }
});

$("#login_form").bind("submit", function() {

    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache   : false,
        url     : "mail.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

    });

html -

      <a id="tip5" href="#login_form">test</a>

<div style="display:none">
    <form id="login_form" method="post" action="">
                <p id="login_error">Please, enter data</p>
            <p>
                <label for="login_name">Login: </label>
                <input type="text" id="login_name" name="login_name" size="30" />
            </p>
            <p>
                <label for="login_pass">Password: </label>
                <input type="password" id="login_pass" name="login_pass" size="30" />
            </p>
            <p>
                <input type="submit" value="Login" />
            </p>
            <p>
                <em>Leave empty so see resizing</em>
            </p>
    </form>
</div>
4

1 回答 1

1

您必须按以下顺序添加文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>

否则你的代码是正确的

于 2012-07-24T08:31:37.503 回答