www.webdeveloper.com
Results 1 to 5 of 5

Thread: Floated Popup Window

  1. #1
    Join Date
    Apr 2012
    Location
    Kolkata, India
    Posts
    2

    Floated Popup Window

    Hi,

    I am using a website. There I have to use a pop up window that will have floated and movable but will not be closed instead of refreshing the page or clicking other links of the parent page. Is it possible?
    Kindly give me the suggestion.

  2. #2
    Join Date
    Jan 2009
    Posts
    3,346
    Sounds like you are looking for a modal window perhaps? This would be more of a client-side questions as you'll likely use Javascript to make it happen.

  3. #3
    Join Date
    Jul 2009
    Location
    My house, sitting at the computer. Duh!
    Posts
    118
    Here's some sample code for a JavaScript powered model window. You can just save this as a file and open it in a browser for an example. There isn't much there, but it should be close to what you're looking for.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html>
    	<head>
    		<title>Test Page</title>
    		
    		<style type="text/css">
    			#backing
    			{
    				display: none;
    				background: #222;
    				position: fixed;
    				top: 0;
    				right: 0;
    				bottom: 0;
    				left: 0;
    			}
    			#model_window
    			{
    				display: none;
    				position: fixed;
    				top: 100px;
    				left: 50&#37;;
    				width: 400px;
    				height: 300px;
    				margin: 0 0 0 -200px; /* Center it with half its with in negative margin. */
    				padding: 10px;
    				background: #eee;
    				border: 1px solid #000;
    				
    				-moz-border-radius: 5px;
    				-webkit-border-radius: 5px;
    				border-radius: 5px;
    			}
    			#open_button, #close_button
    			{
    				display: block;
    				width: 90px;
    				padding: 5px;
    				background: #555;
    				color: #fff;
    				font-size: 14px;
    				font-family: arial;
    				
    				-moz-border-radius: 5px;
    				-webkit-border-radius: 5px;
    				border-radius: 5px;
    			}
    			#close_button
    			{
    				position: fixed;
    				top: 10px;
    				right: 10px;
    			}
    		</style>
    	</head>
    	
    	<body>
    		<div id="open_button">Click to Open!</div>
    		
    		<div id="backing">
    			<div id="close_button">Click to Close!</div>
    		</div>
    		
    		<div id="model_window">
    			<p>Some</p>
    			<p>random</p>
    			<p>stuff.</p>
    		</div>
    		
    		<script type="text/javascript">
    			var buttons = new Object();
    			buttons.open = document.getElementById('open_button');
    			buttons.close = document.getElementById('close_button');
    			
    			// Opening button event attachment.
    			if (document.addEventListener)
    			{
    				buttons.open.addEventListener('click', function()
    				{
    					document.getElementById('model_window').style.display = 'block';
    					document.getElementById('backing').style.display = 'block';
    				}, false);
    				buttons.close.addEventListener('click', function()
    				{
    					document.getElementById('model_window').style.display = 'none';
    					document.getElementById('backing').style.display = 'none';
    				}, false);
    			}
    			else if (document.addEventListener)
    			{
    				buttons.open.attachEvent('onclick', function()
    				{
    					document.getElementById('model_window').style.display = 'block';
    					document.getElementById('backing').style.display = 'block';
    				});
    				buttons.close.attachEvent('onclick', function()
    				{
    					document.getElementById('model_window').style.display = 'none';
    					document.getElementById('backing').style.display = 'none';
    				});
    			}
    		</script>
    	</body>
    </html>

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    jQuery-UI also has a very nice modal window.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  5. #5
    Join Date
    Oct 2008
    Location
    Seattle, Wa
    Posts
    695
    Wrong forum =(
    _,-O
    O
    (_)) ubuntu -
    -`-O

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