【问题标题】:How to redirect back to index page and display modal pop up as per redirecting? PHP如何重定向回索引页面并根据重定向显示模式弹出? PHP
【发布时间】:2013-11-13 07:48:01
【问题描述】:

我有一个要求输入的索引页面。单击提交按钮后,输入将在另一个 .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

`(函数(全局){ '使用严格'; // 存储变量 变模态 = {}; // 存储当前活动元素 modal.lastActive = 未定义; modal.activeElement = 未定义; // Polyfill addEventListener for IE8 (只是非常基础的) modal._addEventListener = 函数(元素、事件、回调){ if (element.addEventListener) { element.addEventListener(事件,回调,假); } 别的 { element.attachEvent('on' + 事件,回调); } }; // 按下 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'; 提前感谢您的回答。希望你能帮我解决。

【问题讨论】:

    标签: javascript php html


    【解决方案1】:

    快速而肮脏的答案。修改您的 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 的时间。

    【讨论】:

    • 嗨@bishop 感谢您的回答。我试过你说的。我在 javascript 中使用了header('Location:' . $uploadForm . '?thanks=1');,我将其更改为(function (global) { some code here},但它没有显示模式弹出窗口。但我可以看到链接转到“mysite.com/Folder/index.php?thanks=1”。我在这里做错了什么?再次感谢
    • 我在 index.php 中也有&lt;link rel="stylesheet" href="modal.scss"&gt;
    • 感谢@NullPointer 进一步完善了主教的回答。如果您有任何其他想法,请随时回答。再次感谢
    • 嗨!我已经编辑了我的问题。请注意$uploadForm = 'http://' . $_SERVER['HTTP_HOST'] . $directory_self . 'index.php';。但是,我尝试将其更改为$uploadForm = 'index.php';,但仍然无效。
    • 根据您的第一条评论,您将函数定义放在脚本标签内,但实际上并未调用该函数。从简单开始,只需将 alert('Thanks!') 放在脚本标签中。那样有用吗?此外,您应该能够通过直接调用 URL 来测试弹出部分,例如在您的浏览器中 http://...whatever../index.php?thanks=1.
    【解决方案2】:

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

    在你的重定向 php 文件中

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

    在你的 html 中

    <?php if($_GET['modal'] == 1){ ?>
     do something to make your modal appear
    <?php } ?>
    

    【讨论】:

    • 感谢@uptownhr 的回答。我试过了,但它仍然没有显示模态。我在这里做错了什么?希望你能进一步帮助我。谢谢
    • 我必须声明?openModal=1吗?还是声明本身是header('Location: ' . $uploadForm . '?modal=1');?谢谢
    猜你喜欢
    • 1970-01-01
    • 2013-10-20
    • 2012-06-14
    • 2017-10-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-22
    • 2021-01-21
    相关资源
    最近更新 更多