Question

问题

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

到目前为止我有什么？

通过ajax post函数提交（POST）的表单

$('#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发布功能”？

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

使用图片的示例

enter image description here

在此图片中，消息位于表单顶部，而不是介于两者之间。

Answer 1

http://jsfiddle.net/f7EZJ/

JSFiddle节目是一个有效的例子......

<body bgcolor="#DDDDDD">
    <table class='dialog' id='dlg' style='top:0px;left:0px;width:100%;height:100%;position:absolute;' cellspacing='0px'>
        <tbody>
            <tr>
                <td onclick='return false;'>
                    <div style='margin: 0px auto; border: 1px solid black; padding: 20px; width: 200px; border-radius: 8px;'>
                        <center style='margin-top: -10px;'>
                            <b>
                                <font size='+2'>Header</font>
                            </b>
                        </center>
                        <hr style='border: 1px solid black;'/>Hai<br/>
                        <a href='#' style='float: right; margin-right: -15px;' onclick="document.getElementById('dlg').style.display = 'none'; return false;">Close</a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body

Answer 2

第一步阅读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/

Answer 3

<强>溶液

在放置在＃form1中的div上使用绝对定位我能够在表格的顶部获得“浮动”的反馈，如图所示。

<强> CSS

#msg{
    ;
    position:absolute;
    top:0;
    left:0;
    border: 6px solid #5C5C5C;
    height:300px;
    padding:30px;

}

<强> HTML

添加了div msg

<div class='content one'>
      <div id="contact-form" class="clearfix">

         <div id="msg"></div>//added div

         <P>Quick And Easy!</P>
        <br/>
        <P>Fill out our super swanky contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry.</P>
        <br/>

更改了ajax功能

这

$('#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').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest1.php', data: $("#form1").serialize(), success: function(response) { $('#msg').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 078675675446 or isaaclayne@southwestcarfinder.co.uk"); } }); }); </script>

我怎样才能收到一条消息，让我坐在html之上？

3 个答案: