在表单换行中创建确认消息叠加

时间:2014-05-09 01:26:03

标签: jquery forms overlay confirmation

我需要在提交后显示确认消息。我不想要弹出窗口。我不想改变页面。相反,我希望<div> #input_form覆盖内部带有html消息的覆盖。我希望这是有道理的。

我如何使用jQuery执行此操作?

任何帮助都将不胜感激。

这是我的代码的简化版本。我已经进行了验证:

<form id="form_volunteer" name="form_volunteer">
  <div id="input_form">
     <input class="req-string" name="first_name" type="text" value="">
     <input name="company_name" type="text" value="">
     <input class="submit" type="submit" name="submit" value="Send" id="form_vol" >
  </div>
</form>

1 个答案:

答案 0 :(得分:0)

尝试这样的事情:

HTML

<form id="form_volunteer" name="form_volunteer">
  <div id="input_form">
     <div id="confirm"></div>
     <div id="myform">
     <input class="req-string" name="first_name" type="text" value="">
     <input name="company_name" type="text" value="">
     <input class="submit" type="submit" name="submit" value="Send" id="form_vol" >
     </div>
  </div>
</form>

CSS

    #confirm,#myform{
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    background-color:#eee;}

    #confirm{
    z-index:0;}

jquery的

    $('#form_volunteer .submit').click(function(){
       $('#confirm').css('z-index','2');
    });

在jquery中你也可以使用submit函数并使用preventdefault ...