Question

以下是我的小提琴，其中我使用类叠加创建了一个div，我试图在用户单击提交按钮时执行该操作，然后该叠加类div出现在联系人表单的div上，并且单击关闭按钮，div隐藏和它再次显示重置表单。请告诉我如何在提交按钮

上的联系表单上进行此类覆盖

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

}

Answer 1

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

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

Answer 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">

Answer 3

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

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

通过这种方式，您可以确保您的叠加层绝对位于联系表单的顶部。

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

.overlay { display: none; }

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

在这里，您需要再次显示叠加层，您可以使用jQuery的.show()：

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

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

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

顺便说一句，您可以在jQuery中阅读有关.submit()和.ajax()方法的内容。

这是一个有效的jsFiddle。

Answer 4

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

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/

Answer 5

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

这是一种方法。但是你的表格还没有提交。最好的方法是在帖子后显示叠加层。然后你可以用按钮隐藏叠加层。

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

在联系表格的div上叠加div

5 个答案: