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 回答