定位Twitter Bootstrap警报框时出错。

Question

美好的一天，我希望在发送消息后使用Twitter Bootstrap显示警报但警报显示在菜单栏之后（如图中所示）。我希望警报显示就像JavaScript警报一样，即页面内容应该在警报后面。我该怎么做呢？

if (isset($_POST['send'])){

                $param = array(
                'sender_id'=> $_SESSION['id'],
                'receiver_id' => $_POST['receiver_id'],
                'message'=> $_POST['message']

            );
                $sum = $param['receiver_id'] + $param['sender_id'];

                $sql1= "INSERT INTO message (sender_id, receiver_id, message, message_id) VALUES (:sender_id, :receiver_id, :message, '$sum')";
                $db->query($sql1, $param); 
                echo "


        <div class='alert alert-success'>

            <a href='#' class='close' data-dismiss='alert'>&times;</a>

            <strong>Success!</strong> Your message has been sent successfully.

        </div>
        ";                          
  }

Answer 1

你需要这个：

http://getbootstrap.com/javascript/#modals

你可以像你想要的那样设置这种模态。

您可以使用此标记手动启动模式：

$(document).ready(function() {
    $('#myModal').modal('show')
});

修改 我不知道你处理服务器端进程的方式，但这种模式解决方案只适用于ajax。我建议这样做：

$(document).ready(function() {
    // Request
    $.ajax({
        url: "/myAjaxFolder/myServerSideProcess.php"
    })

    // Success
    .done(function(data) {
        $('#successModal').modal('show')
    })

    // Error
    .fail(function() {
        $('#errorModal').modal('show')
    });
});

希望这有帮助。

Answer 2

echo '<script>alert("Your message has been sent successfully.");</script>';   

或者，如上面的答案，您可以使用模态。