0

我有一个要求输入的索引页。单击提交按钮后，输入将在另一个 .php 文件中处理（过程包括使用 imagecreatefromjpeg 和 mysql 查询）。现在，它需要再次重定向到索引并显示一个模式弹出窗口说谢谢。我可以使用以下代码再次重定向到索引页面：

    if (!empty($name) && !empty($email) && !empty($office_id) && !empty($title) && !empty($story)) {

        $save_sql = "INSERT INTO `tbl_amadeuscontest` (filename, name, email, office_id, title, story, time) VALUES ('$img_newname','$name','$email','$office_id','$title','$story','$sql_date')";

        $query = mysql_query($save_sql,$con) or die(mysql_error("Could not write information to the database")); 

        if (mysql_affected_rows($con) !== 0) {              
                    header('Location: ' . $uploadForm);

                } 

        mysqli_close($con);
    }

基本上，它就是header('Location: ' . $uploadForm);做这项工作的人。但是我怎样才能同时覆盖一个模式弹出窗口说谢谢呢？我需要调用js吗？功能？还是我需要回显 HTML？我需要在哪里放置代码？谢谢。

我在这里有一些用于模式弹出的 HTML 代码：HTML ` 

                <div class="modal-inner">
                        <img src="http://mysite.com/modal/images/thanku-post.jpg" />
                </div>

                <!-- Use Hash-Bang to maintain scroll position when closing modal -->
                <a href="#!" class="modal-close" title="Close this modal"
                        data-dismiss="modal">&times;</a>
            </section>
<script src="js/modal.js"></script>`

编辑 1 modal.js

`(function(global) { 'use strict'; // 存储变量 var modal = {}; // 存储当前活动元素 modal.lastActive = undefined; modal.activeElement = undefined; // Polyfill addEventListener for IE8（仅非常basic) modal._addEventListener = function (element, event, callback) { if (element.addEventListener) { element.addEventListener(event, callback, false); } else { element.attachEvent('on' + event, callback); } }; // 按下 ESC 时隐藏覆盖 modal._addEventListener(document, 'keyup', function (event) { var hash = window.location.hash.replace('#', '');

    // If hash is not set
    if (hash === '' || hash === '!') {
        return;
    }

    // If key ESC is pressed
    if (event.keyCode === 27) {
        window.location.hash = '!';

        if (modal.lastActive) {
            return false;
        }

        // Unfocus
        modal.removeFocus();
    }
}, false);

// Convenience function to trigger event
modal._dispatchEvent = function (event, modal) {
    var eventTigger;

    if (!document.createEvent) {
        return;
    }

    eventTigger = document.createEvent('Event');

    eventTigger.initEvent(event, true, true);
    eventTigger.customData = { 'modal': modal };

    document.dispatchEvent(eventTigger);
};


// When showing overlay, prevent background from scrolling
modal.mainHandler = function () {
    var hash = window.location.hash.replace('#', '');
    var modalElement = document.getElementById(hash);
    var htmlClasses = document.documentElement.className;
    var modalChild;
    var oldModal;

    // If the hash element exists
    if (modalElement) {

        // Get first element in selected element
        modalChild = modalElement.children[0];

        // When we deal with a modal and body-class `has-overlay` is not set
        if (modalChild && modalChild.className.match(/modal-inner/)) {
            if (!htmlClasses.match(/has-overlay/)) {

                // Set an html class to prevent scrolling
                document.documentElement.className += ' has-overlay';
            }

            // Unmark previous active element
            if (modal.activeElement) {
                oldModal = modal.activeElement;
                oldModal.className = oldModal.className.replace(' is-active', '');
            }
            // Mark modal as active
            modalElement.className += ' is-active';
            modal.activeElement = modalElement;

            // Set the focus to the modal
            modal.setFocus(hash);

            // Fire an event
            modal._dispatchEvent('cssmodal:show', modal.activeElement);
        }
    } else {
        document.documentElement.className =
                htmlClasses.replace(' has-overlay', '');

        // If activeElement is already defined, delete it
        if (modal.activeElement) {
            modal.activeElement.className =
                    modal.activeElement.className.replace(' is-active', '');

            // Fire an event
            modal._dispatchEvent('cssmodal:hide', modal.activeElement);

            // Reset active element
            modal.activeElement = null;

            // Unfocus
            modal.removeFocus();
        }
    }
};

modal._addEventListener(window, 'hashchange', modal.mainHandler);
modal._addEventListener(window, 'load', modal.mainHandler);
modal.setFocus = function () {
    if (modal.activeElement) {

        // Set element with last focus
        modal.lastActive = document.activeElement;

        // New focussing
        modal.activeElement.focus();
    }
};

// Unfocus
modal.removeFocus = function () {
    if (modal.lastActive) {
        modal.lastActive.focus();
    }
};

// Export CSSModal into global space
global.CSSModal = modal;

}(window));`

请注意，这$uploadForm意味着$uploadForm = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'index.php'; 提前感谢您的回答。希望你能帮我解决。

4

2 回答 2

0

快速而肮脏的答案。修改您的 other.php 文件以执行以下操作：

header('Location:' . $uploadForm . '?thanks=1');

然后在你的 index.php 的底部，靠近 body 标签关闭的地方，执行以下操作：

<?php if (isset($_GET['thanks']) && 1 == $_GET['thanks']) { ?>
<script type='text/javascript'>
alert('Thanks!');
</script>
<?php } ?>
</body> <!-- end of body -->

您可以在该脚本标记中执行任何您想要的花哨的 Javascript。

这里的想法很简单：当您的index.php在查询中给出thanks=1时，它会显示模式弹出窗口。你设计你的另一个.php是你期望得到的唯一时间thanks=1。

于 2013-11-02T01:59:29.493 回答
0

您可以将一个?openModal=1变量传递给您的索引页面。在您的视图文件中，编写一个将显示您的模态的条件。我不知道你的模态是如何工作的，但要么只是让 css 出现，要么运行你的 js 脚本，从那里打开它。

在您的重定向 php 文件中

 header('Location: ' . $uploadForm . '?modal=1');

在你的 html

<?php if($_GET['modal'] == 1){ ?>
 do something to make your modal appear
<?php } ?>
于 2013-11-02T01:59:06.483 回答