Lightbox on form submit

Question

I am working on an ecommerce site for which, i want the add to cart button to open a lightbox with a form to accept some more details like quantity, etc. The problem is, the way

Answer 1

I will add more details when I have time, but you can set a 'target' for the initiating form's which directs the action output to appear in the specified iframe (make the target='iframe_name' then in the iframe set the 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;
}

Simple Form

  
  



  

    

      X
    
    
  

then instead of stopping propagation and preventing defaults (as suggested above) you'd want to wire-up/fire some JS to bring the targeted iframe up in a lightbox wrapper.

Or see codepen.io/reboot-sequence/pen/WOxYWO