Solved

modal window with some text onmouseover

Posted on 2009-05-13
10
823 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
Comment Utility
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
Comment Utility
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
Comment Utility
check if this work

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

What error its getting ?
0
 
LVL 39

Expert Comment

by:Pratima Pharande
Comment Utility
its working for me in both browsers IE and Mozzila
0
 

Author Comment

by:phillystyle123
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:phillystyle123
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now