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;    
}

Jクエリコード: 

 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 に答える