0

特定のページにログインフォームがポップアップするようにしたい。

<a id="test" href="#login_form">Click me</a>

    <div style="display:none">
            <form id="login_form" method="post" action="parse_login.php">
                <p id="login_error">Please login</p>

            <table>
         <tr><td><input type='text' name='username' placeholder="username" style="width: 250px;" /><p /></tr></td>
                                <tr><td><input type='password' name='password' placeholder="password" style="width: 250px;" /><p /></tr></td>
                            </table>
                            <div class="logginbutton"><button type='submit' name='submit' class="button-small">Login</button>
                        </form>
                    </div>

JSは次のとおりです。

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


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

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

    $.fancybox.showActivity();


    return false;
});

私が望むのは、onclickではなくページページの読み込み時にフォームがポップアップし、訪問者がログインするまでそこにとどまる必要があるため、閉じる記号を取り除く必要があるということです。

フィドルを見てください

4

1 に答える 1

0

試す

jQuery(document).ready(function ($) {
    $.fancybox({
        href: "#login_form",
        modal: true,
        scrolling : 'no',
        titleShow: false,
        onClosed : function() {
            $("#login_error").hide();
        }
    });
});

ページの読み込み時に fancybox を起動します。

注: modal: truefancybox を閉じることができなくなり、閉じるボタンは表示されません (ボックスの外側でエスケープまたはクリックしても閉じられません) ボックス内に閉じるボタンを配置すると ($.fancyblox.close()メソッドにバインドされます)、またはフォームが閉じます。フォームが検証に合格し、送信された場合。

その場合、return falseこのスクリプトから削除する必要があります

$("#login_form").bind("submit", function() {  
    if ($("#username").val().length < 1 || $("#password").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false; // prevents the form of being submitted if validation fails
    }    

    // $.fancybox.showActivity(); // you don't need this unless you are going to display the results in fancybox

    // return false; // <== this will prevent the form of being submitted, regardless it passes the validation
});

これはfancybox v1.3.4用であることに注意してください（投稿で使用したAPIオプションのため、そのバージョンを使用していると思います）

編集：OK、私はあなたのためにそれをやった、JSFIDDLEを見てください

次のような小さなhtmlの間違いも修正しました

<a id="test" href="#login_form">Click me</div>
于 2013-10-16T18:21:32.517 に答える