confirm plugin

by chrystalingus

HTML

<form>
	<input type="text" name="freetext" value="">
	<input type="hidden" name="somename1" value="1">
	<input class="confirm_this" type="submit" value="send">
</form>

<hr>

<form>
<div>
	<input id="radio_ins1" type="radio" name="v_versichert" value="1">
	<input id="radio_ins0" type="radio" name="v_versichert" value="0">
</div>
<div>
	<input id="radio_post" type="radio" name="v_spedition" value="9">
	<input id="radio_gls" type="radio" name="v_spedition" value="12">
</div>
<input class="confirm_this" type="submit" value="send">
</form>

CSS

#modal_confirm {
		display:none;
		width:100%;
		height:100%;
		background: #000;
		opacity: 0.7;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		}
		
form, #form_marker {
		margin:0px;
		}

JavaScript

$('.confirm_this').click(function(e){
		e.preventDefault();
		var modal_markup = '<div id="modal_confirm"></div>';
		$('body').append($(modal_markup));
			
				var send_button = $(this);
				var formular = send_button.parent();
				var formular_width = formular.outerWidth();
				var formular_height = formular.outerHeight();
				var reset_button_markup = '<input id="reset_button" type="reset" value="No">';
					$(reset_button_markup).insertAfter(send_button);
				var reset_button = $('#reset_button');
				var orig_send_value = send_button.attr('value');
				var form_marker_markup = '<div id="form_marker"></div>'; // placeholder for the form which temporarily goes into the modal overlay (and to find it's original location later)
					$(form_marker_markup).insertAfter(formular);
				var form_marker = $('#form_marker');
					form_marker.css({
						'width': formular_width+'px',
						'height': formular_height+'px'
					});
				var modal = $('#modal_confirm');
	
				send_button.unbind();
				formular.children().hide();
				send_button.attr('value', 'Yes').show();
				reset_button.show();
				formular.appendTo(modal);
				modal.show();

				reset_button.click(function(e){
					e.preventDefault();
					formular.insertBefore(form_marker);
					form_marker.remove();
					modal.remove();
					reset_button.unbind().remove();
					send_button.attr('value', orig_send_value).unbind();
					formular.children().show();
					confirm();
				});
				
			
	});