Question

我正在开发一个电子商务网站，我希望添加到购物车按钮打开一个带有表单的灯箱，以接受更多细节，如数量等。问题是，框架的实现方式，添加到购物车按钮本身是提交到包含上述表单的页面的表单的一部分。那么，我如何获得添加到购物车按钮以在灯箱中加载下一个表单？

Answer 1

只需将点击处理程序附加到提交表单的按钮上，如下所示：

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

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

});

这将使表格不被提交（或者至少应该提交）。至于打开灯箱，您应该能够在上面的e.stopPropagation();电话之后加入...只是正常打开它。

您可能遇到的主要问题是如何将其他表单中的信息包含在原始表单的灯箱中。您可能只想通过$.post调用提交所有内容，或者根据灯箱中的信息执行一些$("form").append()调用，将隐藏字段插入原始表单中？

Answer 2

我会在有空的时候添加更多详细信息，但您可以设置一个＆＃39;目标＆＃39;对于启动表单，它指示操作输出显示在指定的iframe中（使目标=＆＃39; iframe_name＆＃39;然后在iframe中设置名称=＆＃39; iframe_name＆＃39;）;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

然后不是停止传播并防止默认（如上所述），而是想要连接/触发一些JS以将目标iframe放入灯箱包装中。

或者参见codepen.io/reboot-sequence/pen/WOxYWO

表格上的灯箱提交

2 个答案: