SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Design a Pop-Up Message

    Hello,

    I have a website and I need to add a feature -- pop-up window or message that will give the user 3 or 4 radio options to change their security settings. I would like to be able to design the pop-up message so that it follows the color scheme on the rest of the page. This function is within a form that was done using tables, classes, divs.

    To give you an idea visually.

    Email: (Form Field) edit privacy (<----link--->)
    this is where the pop-up message would come into play).


    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Ho,

    Have a read of this article which explains how to make accessible pop ups.

    http://accessify.com/features/tutori...perfect-popup/

    You could make a pop up message on hover with css similar to the suckerfish menus but it would still require JS to work in IE. Or You might like Stu Nichols version of pop ups.

    http://www.cssplay.co.uk/menu/balloons.html

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pop-Up Forms

    Thanks for the help, you are always very helpful...i have realized what i need is something similar to: http://ajaxweb.blogspot.com/2005/12/...-up-forms.html

    do u know of any tutorials, that will explain how to produce this sort of "pop-up form". I believe this site is using javascript.

    thanks,
    Tracie

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You will need to ask in the javascript forum as that solution seems quite advanced and my js is basic at best.

    You can make a simple hide and show using onclick as follows but this is at the most basic level.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .test{background:#f2f2f2;border:1px solid red;padding:5px;}
    #formx{
    	display:none;
    	border:1px solid #000;
    	background:#ccc;
    	width:200px;
    	position:absolute;
    }
    #formx p{padding:10px;margin:0}
    .wrap{position:relative}
    </style>
    <script type="text/javascript">
    function toggleLayer(whichLayer,hshow)
    {
    	if (document.getElementById)
    	{
    		var style2 = document.getElementById(whichLayer).style;
    		if (hshow =="on") {
    		style2.display = "block";
    		}
    		else
    		{
    				style2.display = "none";
    	 }
    	}
    }
    </script>
    </head>
    <body>
    <h1>Hide and Show</h1>
    <div class="wrap">
    	<p><a href="#" onclick="toggleLayer('formx','on');">Pop Up</a></p>
    	<form id="formx" action="" method="get" onsubmit="toggleLayer('formx','off');">
    		<p>
    			<input name="radiobutton" type="radio" value="radiobutton" id="radiobutton" />
    			<label for="radiobutton">Test 1</label>
    			<br />
    			<input name="radiobutton" type="radio" value="radiobutton" id="radio" />
    			<label for="radio">test 2</label>
    			<br />
    			<input name="radiobutton" type="radio" value="radiobutton" id="radio2" />
    			<label for="radio2">Test 3</label>
    			<br />
    			<input type="submit" name="Submit" value="Submit" />
    		</p>
    	</form>
    </div>
    <p class="test">Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content : Some text content
    	: Some text content : Some text content : Some text content : Some text content : Some text content : </p>
    </body>
    </html>
    I will move the post to the javascript forum for a better answer

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, once again


Bookmarks

Posting Permissions

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