1

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

http://jsfiddle.net/VqDKS/

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

}
4

5 回答 5

3

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

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

于 2013-07-22T12:41:09.803 回答
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">
于 2013-07-22T12:57:22.720 回答
1

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

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/

于 2013-07-22T12:53:17.040 回答
1

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

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

这样，您将确保您的覆盖将绝对定位在您的联系表格的顶部。

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

.overlay { display: none; }

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

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

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

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

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

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

这是一个工作jsFiddle。

于 2013-07-22T12:37:35.910 回答
0

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

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

$overlay.on('click', 'input[type=button]', function() {
    $overlay.hide();
});
于 2013-07-22T12:51:50.170 回答