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

Question

I'm trying to show a remote content inside a modal using Twitter Bootstrap with this code:

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

When I click on any link that trigger modal, like this image:

But then, when content is loaded, I lost the modal setup and the remote content replaces the complete modal layout, like this image:

What I'm doing wrong?

Look in code generated by remote call

I take a closer look to the modal after it loads and just the <div class="modal-header">...</div> dissapear and I don't know the cause. This is the code for the modal after it loads the remote content:

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

Any advice?

Answer 1

by default it set the content on "modal-content" class. you can use ajax call to set content on "model-body" class or you can return following code in your remote function, then it will automatically set your model box.

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