Solved

modal window with some text onmouseover

Posted on 2009-05-13
10
826 Views
Last Modified: 2012-05-06
i'm not a js programmer AND i'm looking for a modal window that pops up onmouseover (and on click as well) that i can put a graphic and some text into  - looking for easy to follow suggestions.

thanks!
0
Comment
Question by:phillystyle123
  • 5
  • 3
  • 2
10 Comments
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 24381935
Try this

               <a href='#' onmouseover="window.open ('7.html',
'mywindow','menubar=1,resizable=1,width=350,height=250');" target="_blank"   >MouseOver</a>
<a href='#' onclick="window.open ('7.html',
'mywindow','menubar=1,resizable=1,width=350,height=250');" target="_blank"   >Onclick</a>

Replace 7.html with your page name that you want to open in Popup window
for more info about window.open refer
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
0
 

Author Comment

by:phillystyle123
ID: 24381978
thansk for the response pratima mcs - the on click is working - the mouseover is not - here's my 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
 
<body>
   <a href='#' onmouseover="window.open ('modaltest.php',
'mywindow','menubar=1,resizable=1,width=350,height=250');" target="_blank"   >MouseOver</a>
<a href='#' onclick="window.open ('modaltest.php',
'mywindow','menubar=1,resizable=1,width=350,height=250');" target="_blank"   >Onclick</a>
</body>
</html>

Open in new window

0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 24381987
check if this work

<a href='#' onmouseover="alert('test')" target="_blank"   >MouseOver</a>

What error its getting ?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 24381993
its working for me in both browsers IE and Mozzila
0
 

Author Comment

by:phillystyle123
ID: 24382013
ah yes-had my pop up blockter turned on! now it works- only problem is, i'm looking for a sort of "frameless" look

sort of like this -

http://www.gap.com/browse/product.do?cid=37455&vid=1&pid=652033&scid=652033012

but without the move around the photo feature
0
 

Author Comment

by:phillystyle123
ID: 24382021
for instance something like this would be PERFECT - if i could get it to work onmouseover:

http://ctemps.cjehost.com/modaltest.php

click on "Simple Window Modal"
<!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">
<head>
<title>Simple JQuery Modal Window from Queness</title>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
 
$(document).ready(function() {	
 
	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});
 
</script>
<style>
body {
font-family:verdana;
font-size:15px;
}
 
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}
 
#boxes #dialog1 {
  width:375px; 
  height:203px;
}
 
#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}
 
#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}
 
#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}
 
#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}
 
#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>
 
<ul>
<li><a href="http://www.queness.com">Normal Link</a></li>
<li><a href="#dialog" name="modal">Simple Window Modal</a></li>
<li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
<li><a href="#dialog2" name="modal">Sticky Note</a></li>
</ul>
 
<div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>
 
<div id="boxes">
 
<div id="dialog" class="window">
 
Simple Modal Window | 
<a href="#"class="close"/>Close it</a>
</div>
  
<!-- Start of Login Dialog -->  
<div id="dialog1" class="window">
  <div class="d-header">
    <input type="text" value="username" onclick="this.value=''"/><br/>
    <input type="password" value="Password" onclick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
 
</div>
<!-- End of Login Dialog -->  
 
 
 
<!-- Start of Sticky Note -->
<div id="dialog2" class="window">
  So, with this <b>Simple Jquery Modal Window</b>, it can be in any shapes you want! Simple and Easy to modify : ) <br/><br/>
<input type="button" value="Close it" class="close"/>
</div>
<!-- End of Sticky Note -->
 
 
 
<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
 
</div>
 
 
 
</body>
</html>

Open in new window

0
 
LVL 20

Accepted Solution

by:
ddayx10 earned 500 total points
ID: 24382056
For real straight-forward modal making I like to use this kind of thing. There are a lot of ways to make modals, but for simplicity sake I'm just giving you a basic idea.

dday
<head>
<title>Untitled Page</title>
 
<script type="text/javascript">
function showModal()
{
document.getElementById('modalBox').style.display = 'block';
return false;
}
 
function hideModal()
{
document.getElementById('modalBox').style.display = 'none';
return false;
}
</script>
</head>
<body>
<div style="position:relative; margin:50px 50px;">
<a href="#" onclick="return showModal()" onmouseover="return showModal()">ClickMe</a>
<div id="modalBox" style="position:absolute; top:0px; left:0px; display:none;">
<img src="/img/someimage.jpg" height="25" width="25" />
<a href="#" onclick="return hideModal()">Close</a>
</div>
 
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:phillystyle123
ID: 24384745
ddayx10 - this is very cool! very straightforward - it's pretty much exactly what i need. my only quesiton is  - i would prefer the modal window source to be a seperate webpage instead of

<div id="modalBox" style="position:absolute; top:0px; left:0px; display:none;">
<img src="/img/someimage.jpg" height="25" width="25" />
<a href="#" onclick="return hideModal()">Close</a>
</div>

is there a way to pull that off?
0
 

Author Closing Comment

by:phillystyle123
ID: 31581327
Thanks - i actually ended up using something a little bit more flexible:

http://deseloper.org/examples/modal-simple/ - works great! so far. i was having problems with z-index and position with your solution - but it defintely pushed me toward the solution - thanks for taking the time.
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24390816
I can see this is closed. I didnt mean not to answer I was just away from computer for about 12 hrs. Glad you found a solution.

dday
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question