Modal forms

cnshealthcare
cnshealthcare used Ask the Experts™
on
Hello all,

I am building a web application that will have a little part of it a POS. I couldn't get my wish which would have filled out the credit card stuff by itself on a swipe, but I think the next best thing is to use modal forms.

Now, here is my dilema, I have created a modal form that only has 1 text field. When the form is triggered the field is active so you can swipe the card. The problem I'm having is that the form keeps opening a new window to send the card info to. I want that the form to send the info back to the original so that the entered information is kept as it was and there is no need to re-enter it. OR, go back to the prev form and resubmit the info that was typed, either way it would be a life saver.

Thanks,

Florin
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
You may use a css popup. As you will see the fields is itself in the page :

(click on Pif the Dog to open)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 
$(document).ready(function() {	
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		var id = $(this).attr('href');
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
		var winH = $(window).height();
		var winW = $(window).width();
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).fadeIn(2000); 
	});
	
	$('.window .close').click(function (e) {
		e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
	});		
	
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
}); 
</script> 
<style> 
body {
font-family:verdana;
font-size:15px;
}
 
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:160px;
  height:32px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
#boxes #dialog {
  width:160px; 
  height:32px;
  padding:10px;
  background-color:#ffffff;
}
</style>
</head> 
<body> 
<a href="#dialog" name="modal"><img src="http://jenesuispasungeek.free.fr/wp-content/pif.gif" /></a>
<div id="boxes"> 
    <div id="dialog" class="window"><input type="text" value="Some text" /></div>
	<div id="mask"></div> 
</div>
</body> 
</html>

Open in new window

Author

Commented:
That is great but I need a few adjustments if you could help me. The field needs to be in focus when the poppup comes up and needs to close the popup when "Enter" or field no longer in focus.

Is that a possibility?
leakim971Multitechnician
Top Expert 2014

Commented:
we add : $("#textbox").focus(); in $('a[name=modal]').click(function(e) {
and :



$("#textbox").blur(function (e) {
		e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
	});

Open in new window

OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

Multitechnician
Top Expert 2014
Commented:
the new page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 
$(document).ready(function() {	
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		var id = $(this).attr('href');
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
		var winH = $(window).height();
		var winW = $(window).width();
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
		$(id).fadeIn(2000);
		$("#textbox").focus();
	});
	
	$("#textbox").blur(function (e) {
		e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
	});
	
	$('.window .close').click(function (e) {
		e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
	});		
	
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
}); 
</script> 
<style> 
body {
font-family:verdana;
font-size:15px;
}
 
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:160px;
  height:32px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
#boxes #dialog {
  width:160px; 
  height:32px;
  padding:10px;
  background-color:#ffffff;
}
</style>
</head> 
<body> 
<a href="#dialog" name="modal"><img src="http://jenesuispasungeek.free.fr/wp-content/pif.gif" /></a>
<div id="boxes"> 
    <div id="dialog" class="window"><input id="textbox" type="text" value="Some text" /></div>
	<div id="mask"></div> 
</div>
</body> 
</html>

Open in new window

Author

Commented:
OK cool, It is getting warmer... Now the last problems is that it is still not closing when you swipe a card. Now, the last character on the card is a "?" would it be able to listen for a "?" and then hide the field after it?

If it is asking for too much please say so.

I really do appreciate all your help!

Florin
leakim971Multitechnician
Top Expert 2014

Commented:
replace :
      $("#textbox").blur(function (e) {
            e.preventDefault();
            $('#mask').hide();
            $('.window').hide();
      })

by :

$("#textbox").blur(function (e) {
		e.preventDefault();
		$('#mask').hide();
		$('.window').hide();
	}).keyup(function (e) {
		if($(this).val().substr($(this).val().length-1)=="?") {
			$('#mask').hide();
			$('.window').hide();
		}
	});

Open in new window

Author

Commented:
BRILIANT!!!!!! Thank you!!!!
leakim971Multitechnician
Top Expert 2014

Commented:
You're welcome! Thanks for the points!

Author

Commented:
leakim971: could you please help me one more time? Have a look at this question it is part your code. New points to be awarded
Thanks,
leakim971Multitechnician
Top Expert 2014

Commented:
>Have a look at this question it is part your code.

Sure, which one ? I will do my best but I'm not alone here ;-))

Author

Commented:
This is the other question: parse credit card swipe data to correct fields
Thanks a lot!!!!!!!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial