将 div 覆盖在联系表单的 div 上答案

【问题标题】：Overlay the div on the div of contact form将 div 覆盖在联系表单的 div 上
【发布时间】：2013-07-22 12:32:39
【问题描述】：

以下是我的小提琴，我在其中制作了一个带有类覆盖的 div，我试图这样做，当用户单击提交按钮时，该覆盖类 div 出现在联系表单的 div 上，然后单击 div 隐藏的关闭按钮和它再次显示重置表格。请让我知道如何在提交按钮的联系表单上进行这种叠加

http://jsfiddle.net/VqDKS/

.overlay
{
    background-color: yellow;
    height:200px;
    width: 300px;

}

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

看到这个，用 jQuery 和 CSS 编辑。将覆盖设置为position: absolute 并在提交表单之前将其隐藏。然后在单击“关闭”按钮时将其删除。

http://jsfiddle.net/VqDKS/3/

【讨论】：

【解决方案2】：

CSS：

.overlay
{
    background-color: yellow;
    height:200px;
    width: 300px;
    position: absolute;
    top: 0px;
    z-index: 99;
    display: none;    
}

jQuery 代码：

 function js()
{
    alert('clicked submit: get typed name');
     var name = $("#FN3").val();
    $("#name").html( name );
    $(".overlay").fadeIn()
    return false;
}
$(document).ready(function(){
    $(".close").click(function(){
        $(".overlay").fadeOut();
        $('#contact_form3 input[type="text"]').val('');
    });
});

在 HTML 中进行以下更改：

<input type="button" value="close" class="close">

【讨论】：

【解决方案3】：

您需要在开始时隐藏您的叠加层，只显示表单。单击提交时，显示覆盖并隐藏表单。然后当单击关闭时隐藏覆盖并显示表单。它可以是：

function js()
{   alert('clicked submit: get typed name');
   var name = $("#FN3").val();
   $("#name").html( name );
   $("#form-div").hide();    
   $(".overlay").show();
   return false;
}
function closeOverlay(){
   $("div.overlay").hide();
   $("div#form-div").show();  

}

请看这里： http://jsfiddle.net/injulkarnilesh/VqDKS/7/

【讨论】：

【解决方案4】：

基本上，您需要将联系表单包装器position 属性设置为relative，然后将叠加层的位置设置为absolute，如下所示：

.contact_wrapper { position: relative; }
.overlay { position: absolute; top: 0; left: 0; }

这样您将确保您的叠加层将绝对定位在您的联系表单的顶部。

页面加载时，我们不需要叠加层，所以可以添加如下属性：

.overlay { display: none; }

在您的代码中，当您提交表单时，您正在使用onclick 事件来执行您的处理程序。

这里需要让叠加层再次可见，可以使用jQuery的.show()：

$('.overlay').show();

现在你需要添加事件处理程序来处理关闭按钮，你可以简单地为元素添加唯一的标识符（例如类），然后使用 jQuery 你可以为这个元素触发click 事件，在这里你可以隐藏你的覆盖。

$('.closeBtn').click( function() { 
    $('.overlay').hide();
});

顺便说一下，您可以阅读 jQuery 中的 .submit() 和 .ajax() 方法。

这是一个有效的jsFiddle。

【讨论】：

【解决方案5】：

我稍微更新了你的小提琴：http://jsfiddle.net/nweevers/VqDKS/8/

这是一种方法。但是您的表单仍未提交。最好的方法是在帖子之后显示叠加层。然后您可以使用按钮隐藏叠加层。

$overlay.on('click', 'input[type=button]', function() {
    $overlay.hide();
});

【讨论】：