Popup open/close, form submittal, and redirection in one

**designlink** · 01-23-2013 12:20 AM

I'm wondering if you can create javascript all in one command for a popup window to open and close and other things, instead of splitting the code up into the first html and the popup window's html code it loads.

This is what I'm trying to do:

1) User clicks a link that opens a popup window
2) They click a check box under an agreement form and click "I agree"
3) Which then closes the popup window and redirects them to a url offsite

I have done this successfully by splitting the code, where one piece opens the window which loads an html file in that window, then that html file contains javascript which closes the window and redirects them.

The problem with this I found out, is that the page I redirect them to, is another website, that when the user clicks a link "return to ______ website", they end up getting redirected back to the url of the html page (agreement text) loaded in the popup window, not the website! Not good.

So the solution I'm thinking, would be to do everything in one html code??? Or will that not work? Any other solutions/ideas?

**designlink** · 01-23-2013 05:17 AM

Well, hours later I stumbled upon buried documentation in the offsite website on how to change that return url, so I don't need a fix now after all.

But, I did however find a link that someone else may find very useful in doing what I initially wanted to do, using Jquery: http://www.freshdesignweb.com/35-use...ialog-box.html

And to help anyone else out, here's the code I did what I did with:

The initial page code:

<html>
<head>
<SCRIPT TYPE="text/javascript">

</SCRIPT>
</head>

<body>
<a href="popup1.html" onclick="return popup(this, 'notes')">LINK OR BUTTO TO CLICK GOES HERE</a>
</body>
</html>

Then what I put in the popup html file (popup1.html):

<html>
<head>
<SCRIPT TYPE="text/javascript">

</SCRIPT>
</head>

<body>
<h3>User Agreement:</h3><br>
This is where I put the entire description of the user agreement. You can add a div and make scrollable boxes here as well if you want to keep it nice and tidy. Mine was short enough there was no need."<br><br>

<div id="divform">
<form name="input" action="/" method="get" enctype="multipart/form-data">
<div><input type="checkbox" name="agree" value="agree">I agree<br>
</form>
</div>

<div><a href="URL TO DIRECT TO GOES HERE" onClick="return targetopener(this,true)">submit</a>
</div>
</form>
</div>

</body></html>

I'm not sure if I should have closed this thread or if this helps anyone, but moderators please feel free to delete if you want.

**vwphillips** · 01-23-2013 05:53 AM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#mask { /* CSS for the background mask */
 position:fixed;z-Index:101;visibility:hidden;width:100%;height:100%;left:0px;top:0px;background-Color:#FFCC66;cursor:pointer;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#form {
  position:fixed;
  visibility:hidden;
  z-Index:111;
  top:200px;
  width:500px;
  height:190px;
  background-Color:#FFFFCC;
  padding:10px;
}


/*]]>*/
</style></head>

<body>

<input type="button" name="" value="Show Form" onmouseup="ShowForm('mask','form',true);" />
<input type="button" name="" value="Hide Form" onmouseup="ShowForm('mask','form',false);" />

<div id="form" >
 I agree  <a href="http://www.vicsjavascripts.org.uk/"><input type="checkbox" name="" /></a><br />
 <br />
 I disagree  <a><input type="checkbox" name=""  onmouseup="ShowForm('mask','form',false);" /></a>
</div>
<div id="mask" title="Click to Close" onmouseup="ShowForm('mask','form',false);" ></div>
<br />


<script type="text/javascript">
/*<![CDATA[*/

function ShowForm(mid,fid,ud){
 var msk=document.getElementById(mid),frm=document.getElementById(fid);;
 frm.style.left=(msk.offsetWidth-frm.offsetWidth)/2+'px'
 frm.style.top=(msk.offsetHeight-frm.offsetHeight)/2+'px'
 frm.style.visibility=msk.style.visibility=ud?'visible':'hidden';
}


/*]]>*/
</script></body>

</html>

Thread: Popup open/close, form submittal, and redirection in one

Thread Tools

Display

Popup open/close, form submittal, and redirection in one

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions