jquery - 表单提交后再次显示 Boxy modal 插件后退按钮

Question

我正在使用 boxy jquery 插件来显示我的模态表单。 http://onehackoranother.com/projects/jquery/boxy/

在页面上，我生成了包含提交给自身的表单的模式，如下所示：

<script type='text/javascript'>
    $(function() {
        $('.boxy').boxy({modal: true, closeText: '', draggable: false, unloadOnHide:      true});
    });
</script>

<div class="reportPop hiddenContent" id="reportPop">
    <form action="" method="post" name="reportContent">
        <p><?php echo $t_report_content_message_text; ?></p>
        <br />
        <input type="hidden" value="<?php echo $post->ID ?>" name="reported_item_id" />
        <input type="hidden" value="Question" name="reported_type" />
        <input type="hidden" value="<?php echo $post->ID; ?>" name="question_id" />
        <input type="hidden" value="1" name="report_content" />
        <input type="submit" value="<?php echo $t_report_question;?>" />
    </form>
    <div class="clear"></div>
</div>

我拥有表单提交的所有功能，但是一旦我提交表单并尝试使用后退按钮，它就会再次显示模态，这不是所需的体验。想要在没有打开模式的情况下查看之前的页面。

有任何想法吗？

Answer 1

我想在提交表单时隐藏表单将解决您的问题，请尝试以下代码：

<script type='text/javascript'>
    $(function() {
        $('.boxy').boxy({modal: true, closeText: '', draggable: false, unloadOnHide:      true});
        $('#myForm').submit(function(){
            var self = $(this);
            $('#reportPop').hide("normal",function(){
                self.submit();
            });
            return false;
        });
    });
</script>

<div class="reportPop hiddenContent" id="reportPop">
    <form id="myForm" action="" method="post" name="reportContent">
        <p><?php echo $t_report_content_message_text; ?></p>
        <br />
        <input type="hidden" value="<?php echo $post->ID ?>" name="reported_item_id" />
        <input type="hidden" value="Question" name="reported_type" />
        <input type="hidden" value="<?php echo $post->ID; ?>" name="question_id" />
        <input type="hidden" value="1" name="report_content" />
        <input type="submit" value="<?php echo $t_report_question;?>" />
    </form>
    <div class="clear"></div>
</div>