www.webdeveloper.com
Results 1 to 3 of 3

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

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Posts
    2

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

    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?

  2. #2
    Join Date
    Jan 2013
    Posts
    2
    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">
    <!--
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
    href=mylink;
    else
    href=mylink.href;
    window.open(href, windowname, 'width=500,height=500,scrollbars=no');
    return false;
    }
    //-->
    </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">
    <!--
    function targetopener(mylink, closeme, closeonly)
    {
    if (! (window.focus && window.opener))return true;
    window.opener.focus();
    if (! closeonly)window.opener.location.href=mylink.href;
    if (closeme)window.close();
    return false;
    }
    //-->
    </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.

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,675
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles