Lightbox on form submit

Question

私は数量などの詳細を受け入れるためのフォーム付きライトボックスを開くためにカートに追加ボタンを付ける電子商取引サイトを取り組んでいます。 問題は、カートに追加ボタン自体は、上述のフォームを含むページに提出するフォームの一部である。では、ライトボックスに次のフォームをロードするにはカートに追加ボタンをどのようにしたらいいですか？

Answer 1

そうのようなだけで、フォームを送信するボタンにクリックハンドラをアタッチ：提出されてからフォームを維持します

$("#id_of_submit_button").click(function(e) { 

    e.preventDefault(); 
    e.stopPropagation(); 

}); 

（あるいは、少なくとも、それが必要）。ライトボックスを開くときは、上記のe.stopPropagation();コールの後にそれを含めることができるはずです...通常通りそれを開きます。

主な問題は、追加フォームの情報を元のフォームとともにライトボックスに含めることです。 $.postコールを使用してそのすべてを送信したい場合や、ライトボックスの情報に基づいて元のフォームに隠しフィールドを挿入するために$("form").append()コールを行う場合があります。

Answer 2

私は時間があると詳細を追加しますが、アクション出力が指定されたiframeに表示されるように開始フォームの 'target'を設定できます（target = 'iframe_name'をiframeセットにしますname = 'iframe_name'）;代わりに伝搬を停止し、デフォルトを防ぐ

その後、

jQuery("#myForm").on("submit", function() { 
 
    jQuery(".lightboxOuter").show(); 
 
}); 
 

 
jQuery(".exit button").on("click", function() { 
 
    jQuery(".lightboxOuter").hide(); 
 
});

.lightboxOuter { 
 
    width: 99vw; 
 
    height: 99vw; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    overflow: hidden; 
 
    display: none; 
 
} 
 
.lightboxInner { 
 
    width: 50%; 
 
    height: 50%; 
 
    margin: 30px auto; 
 
} 
 

 
.exit { 
 
    text-align: right; 
 
    position: relative; 
 
    top: 1.5em; 
 
} 
 
.exit button { 
 
    border-radius: 100%; 
 
    display: inline-block; 
 
    margin-left: 90%; 
 
    background: black; 
 
    color: white; 
 
} 
 

 
iframe.sexy { 
 
    background: white; 
 
    border-radius: 5px; 
 
    max-height: 35%; 
 
} 
 

 
.rounded { 
 
    border-radius: 5px; 
 
} 
 

 
html { 
 
    overflow: hidden; 
 
    font-family: Arial, sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<h1>Simple Form</h1> 
 
<form id="myForm" action="https://posttestserver.com/post.php" method="POST" target="output_frame"> 
 
    <input type="text" name="myInput" id="myInput" value="Your Post Input" class="rounded" /> 
 
    <input type="submit" value="Submit" class="rounded"/> 
 
</form> 
 

 
<div class="lightboxOuter"> 
 
    <div class="lightboxInner"> 
 
    <div class="exit"> 
 
     <button>X</button> 
 
    </div> 
 
    <iframe name="output_frame" class="sexy" src="https://posttestserver.com/" id="output_frame" width="100%" height="100%"> 
 
</iframe> 
 
    </div> 
 
</div>

（上記で示唆したように）あなたはライトボックスラッパーでターゲットのiframeを起動するために、ワイヤアップ/火いくつかのJSにしたいと思います。

それともcodepen.io/reboot-sequence/pen/WOxYWO