수량과 같은 몇 가지 세부 정보를 받아들이는 양식이있는 라이트 박스를 열려면 장바구니 버튼에 추가 버튼이 필요한 전자 상거래 사이트에서 작업하고 있습니다. 문제는 프레임 워크 방식 장바구니에 추가 버튼 자체는 위에서 언급 한 양식을 포함하는 페이지로 제출하는 양식의 일부입니다. 그렇다면 라이트 박스에 다음 양식을로드하기 위해 장바구니에 추가 버튼을 얻는 방법은 무엇입니까?양식에 라이트 박스 제출
그냥과 같이, 양식을 제출 버튼에 클릭 핸들러를 첨부 : 제출되는 형태를 유지합니다
$("#id_of_submit_button").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
(또는 적어도 그것을해야한다). 라이트 박스 열기에 관해서는 위의 e.stopPropagation(); 콜 후에 그냥 포함시킬 수 있어야합니다 ... 정상적으로 열리십시오.
아마도 주요 문제는 추가 양식의 정보를 원래 양식의 라이트 박스에 포함시키는 것입니다. $.post 호출을 통해 모든 항목을 제출하거나 라이트 박스의 정보를 기반으로 원래 양식에 숨겨진 필드를 삽입하기 위해 $("form").append() 전화를 걸기를 원할 수 있습니다.
시간이있을 때 자세한 내용을 추가하겠습니다 만, 지정된 iframe에 작업 출력을 표시하는 시작 양식의 '대상'을 설정할 수 있습니다 (대상을 'iframe_name'으로 설정 한 다음 iframe 세트에 지정하십시오). 이름 = '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>또는 codepen.io/reboot-sequence/pen/WOxYWO
것은이 볼, 난 양식이 평소와 같이 제출합니다. 난 리디렉션을 제출하는 페이지가 라이트 박스에서 열리길 원할뿐입니다. – zsquare