表单上的灯箱提交

Question

我正在为其中的一个电子商务网站工作，我希望添加到购物车按钮可以打开一个表单以接受一些更多详细信息，如数量等。 问题是，框架的方式添加到购物车按钮本身是提交给包含上述表单的页面的表单的一部分。那么，如何获得添加到购物车按钮来加载灯箱中的下一个窗体？

Answer 1

只是附加一个单击处理程序上提交表单，像这样的按钮：

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

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

}); 

这将继续被提交的表单（或者至少，它应该）。至于打开灯箱，你应该能够包括在上面的e.stopPropagation();呼叫之后......只是照常打开它。

您可能会遇到的主要问题是如何在灯箱中使用原始形式包含附加表单中的信息。您可能只想通过$.post调用提交全部内容，或者可能需要调用$("form").append()来根据灯箱中的信息将隐藏字段插入原始表单中？

Answer 2

我会在有空的时候添加更多细节，但是您可以为启动窗体设置一个'target'，它指示动作输出出现在指定的iframe中（然后在iframe集中设置target ='iframe_name' 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>

然后而不是停止传播和防止违约（如上面所建议的），你会想线向上/火有些JS把目标IFRAME了在灯箱广告包装。

还是看codepen.io/reboot-sequence/pen/WOxYWO