1

ログインフォームをモーダル内に配置して、送信ボタンに data-dismiss="modal" を追加してみました。モーダルは正常に閉じられますが、POST メソッドは「起動」していないようで、ページは同じままです。他の誰かがモーダル内にフォームを入れてみて、それを機能させましたか?

     <div class="modal hide fade" id="signin-register" tabindex="-1" role="dialog" aria-labelledby="image-modal-label" aria-hidden="true">


    <div class="modal-body">
        <div class="row-fluid">
            <div class="span12">

            <div class="span6">
                <div class="row-fluid">
                    <div class="span12">

                        <legend>Sign in</legend>

                        <form class="navbar-form pull-right" method="POST" action="login/">
                          <input type="hidden" name="a" value="validate" />
                            <input class="input-small" type="text" placeholder="Username" name="username">
                            <input class="input-small" type="password" placeholder="Password" name="password">
                            <button class="btn btn-small btn-info" type="submit" class="btn2" data-dismiss="modal"><strong>sign in</strong></button>
                        </form>

                        <legend>Register</legend>


                        <form action="" method="POST" id="register_form">

                            <label>Username:*</label><input class="input-small" type="text" name="username" placeholder="Username" />

                            <label>Password:*</label><input class="input-small" type="password" name="password" placeholder="Password" />

                            <label>Email:*</label><input type="text" name="email" placeholder="E-mail" /><br>
                            <input type="submit" name="a" value="Register" data-dismiss="modal"/>

                         </form>

                    </div>
                </div>
            </div>

            <div class="span6">
                <div class="row-fluid">
                    <div class="span12">


                    </div>
                </div>
            </div>



            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

また、ログインフォームがモーダルの外でも機能することを再確認しました。

4

4 に答える 4

4

data-dismissリンクまたはボタンに割り当てると、そのボタンのクリック イベントがインターセプトされ、バブルアップが防止されます。フォームの送信ボタンを配置data-dismissすると、実際の「送信」アクションは決して実行されず、フォームは送信されません。

AJAX 経由でフォームを送信する場合は、成功イベントがフォームの却下をトリガーするようにします。従来のフォーム投稿を行っている場合は、ページがリロードまたはリダイレクトされるため、モーダルを閉じる必要はありません。

于 2012-11-16T19:16:56.907 に答える
2

の要素data-dismiss="modal"はモーダルを閉じるためのものであると想定されており、デフォルトの動作 (フォームの送信など) はオーバーライドされます。

フォームを送信する必要がある場合は、送信ボタンでこの属性を使用しないでください。そのような単純な。

于 2012-11-16T19:13:49.113 に答える
1

とても簡単です。送信時にdata-dismiss属性は必要ありません。私はMVC4を使用しており、これを日常的に行っています。

<div id="mdlProceed" class="modal hide fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-header">
            <h3>Header</h3>
        </div>
        <div class="modal-body">
         Body
        </div>
        @using (Html.BeginForm(null, null,
                               new { area = "MyArea", controller = "MyController", action = "MyAction" }, FormMethod.Post))
        {
            @Html.AntiForgeryToken()

            <div class="modal-footer">
                <input type="button" name="cancel" id="cancel" accesskey="c" class="btn btn-warning" data-dismiss="modal" value="Cancel" alt="Return" />
                <input type="submit" name="start" id="start" accesskey="n" class="btn btn-primary" data-loading-text="Please Wait..." value="Continue" />
            </div>
        }
    </div>
于 2012-11-16T19:14:21.770 に答える
-1

私は試しました、そしてそれはうまくいきました！

<div style="width:800px"  class="modal hide fade">
    <div class="modal-header">Some header
    </div>
    <div class="modal-body">Some body
    <input...... fields..... >
    </div>
    <div class="modal-footer">  
       <input class="btn btn-primary" value="Submit" onclick="SubmitData();">
       <a href="#" class="btn" data-dismiss="modal" >Close</a>
    </div>
</div>
于 2012-11-16T19:15:03.303 に答える