在Twitter Bootstrap中通过数据远程覆盖模态内容

雷尼埃

我正在尝试modal使用以下代码Twitter Twitter Bootstrap中显示远程内容

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

有什么建议吗?

ashish.negi

默认情况下,它将内容设置为“ modal-content”类。您可以使用ajax调用在“模型主体”类上设置内容,也可以在远程函数中返回以下代码,然后它将自动设置模型框。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章