模式内容在Twitter Bootstrap中被数据远程覆盖

Question

我正在尝试使用此代码使用Twitter Bootstrap在modal内显示远程内容：

<ol class="breadcrumb text-right">
    <li><a data-target="#modal" data-toggle="modal" data-remote="/app_dev.php/resetting/request" href="#">Forgot password?</a></li>
    <li><a data-target="#modal" data-toggle="modal" data-remote="/app_dev.php/registro" href="#">Register</a></li>
</ol>

<div aria-hidden="true" aria-labelledby="modalLabel" role="dialog" tabindex="-1" id="modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 id="myModalLabel" class="modal-title">Alert</h4>
            </div>
            <div class="modal-body">

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

当我点击任何触发模态的链接时，如下图所示：

但是，当加载内容时，我丢失了模态设置，远程内容取代了完整的模态布局，如下图所示：

我做错了什么？

查看远程调用生成的代码

我在加载后仔细查看模态，只看<div class="modal-header">...</div>消息，我不知道原因。这是加载远程内容后模式的代码：

<div aria-hidden="false" aria-labelledby="modalLabel" role="dialog" tabindex="-1" id="modal" class="modal fade in" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="fos_user_resetting_request" class="fos_user_resetting_request form_registro" method="POST" action="/app_dev.php/resetting/send-email">
                <h2>Solicitar nueva contraseña</h2>
                <div>
                            <label for="username">Nombre de usuario:</label>
                    <input type="text" required="required" name="username" id="username">
                    <input type="submit" value="Restablecer contraseña" id="reset_btn">
                </div>
            </form>

            <script>
                $(document).ready(function() {
                    $("#fos_user_resetting_request").submit(function(e) {
                        e.preventDefault();
                        $.ajax({
                            type: "POST",
                            cache: false,
                            url: "/resetting/send-email",
                            data: $(this).serializeArray(),
                            success: function(data) {
                                $.fancybox(data);
                            }
                        });
                    });
                });
            </script>
        </div>
    </div>
</div>

有什么建议吗？

Answer 1

默认设置内容为＆＃34; modal-content＆＃34;类。你可以使用ajax调用来设置＆＃34; model-body＆＃34;您可以在远程函数中返回以下代码，然后它会自动设置您的模型框。

            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 id="myModalLabel" class="modal-title">Alert</h4>
            </div>
            <div class="modal-body">
               -- YOUR FORM ITEMS --
            </div>