Javascript 我怎样才能得到一条放在html上面的消息？_Javascript_Php_Jquery_Html_Ajax

Javascript 我怎样才能得到一条放在html上面的消息？

javascript php jquery html ajax

Javascript 我怎样才能得到一条放在html上面的消息？,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,问题我有一个表格，一旦用户填写并提交，我想在表格上弹出一条消息，说“现在坐下来，放松一下……”。理想情况下，我希望在这条消息上有一个按钮说“ok” 到目前为止我有什么？通过ajax post函数提交（发布）的表单 $('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest1.php', data: $("#form1").serializ

问题

我有一个表格，一旦用户填写并提交，我想在表格上弹出一条消息，说“现在坐下来，放松一下……”。理想情况下，我希望在这条消息上有一个按钮说“ok”

到目前为止我有什么？

通过ajax 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'）。提交（函数（e）
{
e、 预防默认值（）；
$.ajax({
键入：“POST”，
url:'indextest1.php'，
数据：$（“#form1”）.serialize（），
成功：功能（响应）{
$（“#form1”）.html（“现在坐下来休息一下，我们代表您去工作，我们会向您提供最新的结果信息，如果您有任何问题，我们欢迎您致电078675675446或发送电子邮件isaaclayne@southwestcarfinder.co.uklogo");
}
});
});

现在，我不想替换#form1，而是希望它位于#form1的顶部（上方），以一种格式良好的div/alert/etc形式出现。类似于JS警报框

考虑到我必须保留“ajax发布功能”，这可能吗

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

使用图片的示例

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

JSFIDLE秀就是一个很好的例子

<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


标题
海

解决方案
使用放置在#表格1中的div的绝对定位，我能够获得反馈，使其“浮动”在表格顶部，如pitture所示
CSS
#msg{
    ;
    position:absolute;
    top:0;
    left:0;
    border: 6px solid #5C5C5C;
    height:300px;
    padding:30px;

}

HTML
添加了div msg

//添加div
 又快又简单


 请填写下面的超级时尚联系表与我们联系！请提供尽可能多的信息，以便我们帮助您进行查询。



更改了ajax功能
从
$（'#form1'）。提交（函数（e）
{
e、 预防默认值（）；
$.ajax({
键入：“POST”，
url:'indextest1.php'，
数据：$（“#form1”）.serialize（），
成功：功能（响应）{
$（“#form1”）.html（“现在坐下来休息一下，我们代表您去工作，我们会向您提供最新的结果信息，如果您有任何问题，我们欢迎您致电078675675446或发送电子邮件isaaclayne@southwestcarfinder.co.uklogo");
}
});
});

至
$('#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>

$（'#form1'）。提交（函数（e）
{
e、 预防默认值（）；
$.ajax({
键入：“POST”，
url:'indextest1.php'，
数据：$（“#form1”）.serialize（），
成功：功能（响应）{
$（'#msg'）.html（“现在坐下来休息一下，我们代表您去工作，我们会让您随时了解我们结果的最新信息，如果您有任何问题，我们欢迎您致电078675675446或发送电子邮件。”isaaclayne@southwestcarfinder.co.uk");
}
});
});
第一步阅读本文
下一步在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>

将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();
    });
});

请在此处大致查看它的操作：
使用append
，prepend
而不是html
。在html标记中添加另一个DIV，类似于
，并在回调中使用$（“#msg”）
而不是form1 id选择器。在html代码中希望出现错误的位置添加一个DIV。让我们调用它并添加一个漂亮的CSS，例如红色背景、粗体字体等。然后只需使用$（“#error_message”）.html（“opps，我们有一个错误”）@Dancindy是的，您可以按照@mdesdev提到的方法或使用我的技术（他的更好！）在div上设置高度和宽度，并使用绝对定位<代码>#msg{宽度：200px；高度：200px；位置：绝对；顶部：100px；左侧：100px}

根据您的规格微调顶部/左侧偏移和宽度高度。另外，请记住，绝对定位是基于主体元素完成的。如果你想获得更多的控制权，请将最近的父对象设置为

位置：relative

，这样你就可以从该父对象中进行偏移。就我个人而言，我使用“bootbox”搜索它，它非常好用，也很容易使用，而且完全兼容。那里有十几个库，只是用来显示警报消息、拨号和确认。祝你好运。在研究了你建议的内容之后，似乎每个内容都会在#form1之前或之后插入？这是正确的理解吗？不完全正确。prepend（）在#form1中插入内容，但在开头。append（）在#form1的末尾插入内容。好的，谢谢你的回复，但我希望我能把它放在表单的顶部，使#form1保持不变。在（“内容”）之前执行

$（“#form1”）现在是90年代吗！请不要使用表格进行布局！在Ajax成功函数中，我将考虑添加<代码> >乔恩>和MS> <代码> >“添加<代码> .SoD（））/>代码> <代码> $'（'y.Msg）。对我来说，Jons的解决方案看起来很有希望，因为它还利用了一种关闭消息的方式。好吧，所以我在将其实现到我的页面时遇到了一些问题，我认为这是ajax调用，它不可行
<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;
}

$(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();
    });
});