Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Create a message box with link to webpage.

    I currently have an alert message box appearing which asked the user to visit a website to take a survey. What I would ideally like is a message box appearing which gives them two options in the form of buttons. Yes to take the survey now, which would link to the web page. The second button being cancel which would close the message box, which is normally done with the OK button now.

    Any ideas how this can be done?

    Thanks

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    235
    Thanks
    6
    Thanked 21 Times in 20 Posts
    I would suggest using an window.open with this:

    Code:
    window.open ("http://www.javascript-coder.com","mywindow");
    however I will warn you that people detest such invasive advertisements and I personally would never visit your site again let alone the site you are advertising if you shoved something like that in my face.

    hope that helps!
    Andrew Sharman
    Web designer, developer and programmer.

    If you found my post helpful, why not give thanks! :)

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    In a lot of cases a custom div should do to emulate a modal box.
    You can easily style the div (and buttons) to your needs.

    The important part is to have the zIndex of the main message div
    ("survey in the example") higher than the other elements in the page.
    Do not try to use this over a non-transparent flash element without an
    iframe backing it.

    Simple Example:
    Code:
    <html>
    <head>
    <title>
    </title>
    <style type='text/css'>
    body {
         height:100%;
         margin:0;
         padding:0;
    }
    #survey {
         z-index: 9999;
         left: 0px;
         top: 0px;
         width:100%;
         height:100%;
         background:#000;
         display:none;
         position: absolute;	
         text-align:center;
    }
    #survey div {
         width:300px;
         margin: 100px auto;
         background-color: #fff;
         border:3px double #999;
         padding:15px;
         text-align:center;
    }
    </style>
    <script type="text/javascript">
    var $=$||function(n){return document.getElementById(n);}
    function survey() {
    	var e = $("survey");
    	e.style.display = (e.style.display == "block") ? "none" : "block";
    }
    </script>
    </head>
    <body>
    <a href='#' onclick='survey()'>Great Oportunity</a>
    
    <div id="survey">
         <div>
              <p>Do you want to visit a website to take a survey?</p>
    		<button onclick="window.open('http://www.google.com');survey();">Open New Window</button><br />
    		<button onclick="window.location='http://www.google.com';">Go There</button>
    		<button onclick="survey()">Cancel</button>
         </div>
    </div>
    </body>
    </html>
    Last edited by rdspoons; 06-30-2009 at 03:30 AM.


  •  

    Posting Permissions

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