如何在页面顶部显示成功消息

Question

我已经处理了一段时间了，我有一个脚本，用户可以在其中进行自白，其操作方式是单击打开表单的按钮，并在他们发布时提示成功消息出现，但我只能在该div中显示成功消息，而我想在页面顶部显示它，我该如何实现？

我的警报消息为JS

 $('.alertMsg .alert-close').each(function() {
        $(this).click(function(e) {
            e.preventDefault();
            $(this).parent().fadeOut("slow", function() {
                $(this).addClass('hidden');
            });
        });
    });

PHP

$stmt = $mysqli->prepare("
                                        INSERT INTO
                                            confessions(
                                                userId,
                                                firstName,
                                                confessText,
                                                postDate,
                                                hasImage,
                                                isActive,
                                                postIp
                                            ) VALUES (
                                                ?,
                                                ?,
                                                ?,
                                                ?,
                                                ?,
                                                ?,
                                                ?
                                            )
                    ");
                    $stmt->bind_param('sssssss',
                        $user,
                        $firstName,
                        $confessText,
                        $postDate,
                        $hasImage,
                        $isActive,
                        $postIp
                    );
                    $stmt->execute();
                    $msgDiv = alertBox($confPosted, "<i class='fa fa-check-square'></i>", "success");
                    // Clear the Form of values
                    $_POST['firstName'] = $_POST['confessText'] = $_POST['answer'] = '';
                    $stmt->close();
                }
            } else {
                $msgDiv = alertBox($captchaErrorMsg, "<i class='fa fa-warning'></i>", "warning");
                $toggleOpen = ' in';
            }
        }
    }

这就是我的显示方式，但是我的html代码很大，我将发布我的显示方式以及在哪个部分

<section id="page-title">
        <?php if ($msgDiv) { echo $msgDiv; } ?>
        <div class="container" id="container2">
            <div class="row">
                <div class="col-md-12 title togglePanel">
                    <div class="row">

                            <div class="panel-toggle">
                                <a href="#" class="btn btn-confess btn-icon" id="confessToggle" data-perform="panel-collapse">Leave confession</a>
                                </div>

                    </div>

                    <div class="panel-wrapper collapse<?php echo $toggleOpen; ?>">
                        <center><div class="panel-body fessup-form">

因此，当他们坦白时，他们只需单击LEAVE CONFESSION，然后向下滑动按钮，他们就可以填写表格并提交，提交后，它会将其重定向到首页，并在LEAVE CONFESSION按钮下方显示成功消息< / p>

FORM：

成功味精：

因此，我不想在页面标题部分中显示它，而是希望将其显示在页面顶部。我能做到吗？

Answer 1

您的问题实际上是关于CSS的。您可以通过使div固定或绝对（取决于嵌套）将div弹出到页面顶部。像这样：

import subprocess

def getGitRoot():
    return subprocess.Popen(['git', 'rev-parse', '--show-toplevel'], stdout=subprocess.PIPE).communicate()[0].rstrip().decode('utf-8')

理想情况下，您应该将css放在单独的文件中，但是内联css应该演示我在说什么。考虑到javascript中的类以及使用的样式，以下是我对所需内容的最佳猜测。

HashSet<String> set = (HashSet<String>) sharedPreferences.getStringSet("notes", null);

if (set == null) {
    notes.add("Example note");
} else {
    Log.i("test", set.toString());
    notes = new ArrayList(set);
}

Answer 2

在提交表单时，您可以调用 showMsg（）来查看该成功消息。

希望下面的代码行将对您有所帮助。

function showMsg()
{
$("#alertMsg").fadeIn('slow', function () {
    $(this).delay(3000).fadeOut('slow');
  });
}

.alertMsg
{
display: none;
position: absolute;
padding: 20px;
border: 1 px solid;
background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alertMsg" id="alertMsg">Success</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<button onclick="showMsg()">Submit</button>