javascript - 我怎样才能让一条消息位于 html 之上？

Question

问题

我有一个表单，一旦用户填写并提交，我希望在表单上弹出一条消息，显示“现在坐下来放松一下吧……”。理想情况下，我希望此消息上有一个按钮表示“确定”。

到目前为止我有什么？

通过 ajax post 函数提交(POSTed)的表单

$('#form1').submit(function(e)
{
e.preventDefault();
 $.ajax({
     type: 'POST',
     url: 'indextest1.php',
     data: $("#form1").serialize(),
     success: function(response) {
 $('#form1').html("<div class=\'info\'>Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on 078675675446 or isaaclayne@southwestcarfinder.co.uk<div><div class=\'tick\'>logo");
     }
   });
});

现在我不想替换 #form1，而是希望它位于 #form1 的顶部(上方)，以某种格式良好的 div/alert/etc 的形式。类似于JS Alert框。

鉴于我必须保留“ajax 发布功能”，这可能吗？

抱歉，如果我使用了任何不正确的术语，我仍在学习，并且绝不是专家。

使用图片的示例

在这张图片中，消息位于表单的顶部，而不是在表单之间。

Answer 1

第一步阅读 centering divs 上的这篇文章.

接下来在 html 中设置弹出窗口的样式。使用一个 div 作为弹出窗口，使用一个子 div 作为动态内容。一旦您对弹出窗口的外观感到满意，请将 display:none 添加到其 CSS 中以将其隐藏。

最后在你的ajax成功函数中，更新动态内容并显示弹出窗口。

弹出的 HTML 看起来像这样:

<div id="popup">
    <h2>Info <span title="click to close" class="close">X</span></h2>
    <div class="content"></div>  
</div>

一些快速而肮脏的样式看起来像:

#popup{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;

    border: 1px solid #5C5C5C;    
    height:200px;
    width:300px;
    background-color:#CFC;
    display:none;
}

#popup h2
{
    font-size:1.2em;
    color:#FFF;
    background-color:#090;
    margin:0;
    padding:10px;   
    position:relative;
}

#popup h2>.close
{
    border: solid 1px #FFF;
    padding:2px;
    position:relative;  
    left:220px;
    cursor:pointer;
}

#popup .content
{
    padding:10px;
}

将您的 JavaScript 更改为

$(document).ready(function () {
    //Event Listener for form submit
    $('#form1').submit(function(e){
        e.preventDefault();
        console.log('Form Submitted'); //Debug line
        $.ajax({
            type: 'POST',
            url: 'indextest1.php',
            data: $("#form1").serialize(),
            error: function(){console.log('Ajax Error');}, //Debug Line
            success: function(response) {
                console.log('Ajax Success'); //Debug Line
                $('#popup .content').html("Now sit back and relax while we go to work on your behalf, we'll keep you updated with information on our results and if you have any questions then we welcome your calls or emails on xxxxxx or xxxxx");
                $('#popup').show();
            }
         });
    });        

    //Add the following event listener
    $("#popup .close").click(function(){
        $("#popup").hide();
    });
});

在这里(大致)查看它的实际应用:http://jsfiddle.net/Rq3Up/