表单提交后再次显示Boxy模式插件后退按钮

时间:2012-09-08 11:12:20

标签: jquery submit modal-dialog back-button boxy

我正在使用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>

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

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我想在提交表单时隐藏表单将解决您的问题 试试这个代码:

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