You can certainly do that with some HTML, Javascript, and CSS, but I get that it would be nice if it were an easy "on/off" switch.
 I've done this for customers in the past, so here's my solution. Add Custom HTML to the Form:

Custom HTML Section:

<div class="btn-wrapper">
  <input class="action-btn pre-submit" name="action" value="Submit" type="button"></div>
<div id="WindowShade"></div>
<div id="ConfirmationDialog">
  <div>
    <p>Are you sure you want to submit the form?</p>
  </div>
  <div>
    <input class="action-btn confirm-yes" value="Yes" type="button">
    <input class="action-btn confirm-no" value="No" type="button">
  </div>
</div>

CSS:

/* Style the Dialog Box and Window Shade effect*/
#WindowShade {
	position: fixed; /*display position relative to browser viewport, not other elements on page*/
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #000; /*set BG color*/
	opacity: 0; /* element is invisible at first*/
	z-index: 1000; /*Set a high z-index, to render in front of the other elements on the form*/
	-webkit-transition: opacity 300ms ease-in;/*add a smooth transition for the opacity when it changes*/
	-moz-transition: opacity 300ms ease-in;/* need to use several different approaches, for the various browsers*/
	transition: opacity 300ms ease-in;
	pointer-events: none;
}
#ConfirmationDialog{
	padding: 0px; /*First group of options controls color, shape, and borders*/
	position: fixed;
	top: 20%;
	max-height: 90%;
	overflow-y: auto;
	background: #fff;
  	border-radius: 10px;
  	border: 2px solid black;
	z-index: 2000; /* Set high z index to render in front of everything (note, this is higher than the WindowShade z)*/
	opacity:0; /* Initially, field is transparent */
	-webkit-transition: opacity 300ms ease-in; /* various options to transition opacity smoothly when activated */
	-moz-transition: opacity 300ms ease-in;
	transition: opacity 300ms ease-in;
	pointer-events: none; /* Do not respond to clicks when 'inactive' */
}
/* Create space around div elements on the dialog, so the appearance isn't too cramped*/
#ConfirmationDialog > div{
  	position: relative;
	margin: 5% auto;
	padding: 10px 20px;
	border-radius: 10px;
}
/* Set background colors on confirmation buttons */
#ConfirmationDialog .confirm-yes { background: #99ff99;}
#ConfirmationDialog .confirm-no { background: #ff9999;}

/* Change WindowShade and Dialog Style when the Opened class gets added to the Div elements*/
#ConfirmationDialog.Opened {
	opacity:1; /* make it opaque */
	pointer-events: auto; /* respond to clicks */
}
#WindowShade.Opened {
	opacity:0.3;
	pointer-events: auto;
}

Javascript:

$(document).ready(function(){
  // Hide the real Submit button from the page:
  $(".Submit").hide();
  
  // Open the Confirmation Dialog when the "Pre-Submit" button is pressed (actual submit button is hidden)"
  // Display them by adding the "Opened" class to the WindowShade and ConfirmationDialog objects. The CSS
  // above is what actually causes them to display after the class is added.
  $(".pre-submit").on("click",function(){
    $("#WindowShade").addClass("Opened");
    $("#ConfirmationDialog").addClass("Opened");
  });
  
  //Submit the form if the user presses the Yes button on the confirmation.
  $("#ConfirmationDialog .confirm-yes").on("click",function() {
    $("#WindowShade").removeClass("Opened");
    $("#ConfirmationDialog").removeClass("Opened");
    $(".Submit").trigger("click");
  });
  
  //Allow the user to continue making changes if they press No.
  $("#ConfirmationDialog .confirm-no").on("click",function() {
    $("#WindowShade").removeClass("Opened");
    $("#ConfirmationDialog").removeClass("Opened");
  });
});