Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 454
  • Last Modified:

closing a modal window that is already using close once

if you mouseover the 1st thumb here:

http://ctemps.cjehost.com/subgallery_4column_with_test.php#

you'll see "close window" in the upper right corner - that works.

however i need the "back to the gallery" link underneath the picture to do the same thing and i can't get it to fly. there are two parts to this: 1:css and 2: js.

It looks like i need to create another close function that uses another close-window class like close-window2 or something. i've tried this but i can't get both to work.
js:
 
var modalWindow = {
	parent:"body",
	windowId:null,
	content:null,
	width:null,
	height:null,
	close:function()
	{
		$(".modal-window").remove();
		$(".modal-overlay").remove();
	},
	open:function()
	{
		var modal = "";
		modal += "<div class=\"modal-overlay\"></div>";
		modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">";
		modal += this.content;
		modal += "</div>";	
 
		$(this.parent).append(modal);
 
		$(".modal-window").append("<a class=\"close-window\"></a>");
		$(".close-window").click(function(){modalWindow.close();});
		$(".modal-overlay").click(function(){modalWindow.close();});
		
		
	}
};
 
css:
 
.close-window
{
position:absolute;
width:82px;
height:8px;
right:8px;
top:8px;
background:transparent url('../images/close-button.png') no-repeat scroll right top;
text-indent:-99999px;
overflow:hidden;
cursor:pointer;
opacity:.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
.close-window:hover
{
opacity:.99;
filter: alpha(opacity=99);
-moz-opacity: 0.99;
}

Open in new window

0
phillystyle123
Asked:
phillystyle123
  • 4
  • 2
1 Solution
 
phillystyle123Author Commented:
i've got the thing COMPLETELYstyled - i just need to figure out how to make the "back to the gallery" text close the window - currently just the "close widnow" png closes the window


var modalWindow = {
	parent:"body",
	windowId:null,
	content:null,
	width:null,
	height:null,
	close:function()
	{
		$(".modal-window").remove();
		$(".modal-overlay").remove();
	},
	open:function()
	{
		var modal = "";
		modal += "<div class=\"modal-overlay\"></div>";
		modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">";
		modal += this.content;
		modal += "</div>";	
 
		$(this.parent).append(modal);
 
		$(".modal-window").append("<a class=\"close-window\"></a>");
		$(".close-window").click(function(){modalWindow.close();});
		$(".modal-overlay").click(function(){modalWindow.close();});
		
		
	}
};

Open in new window

0
 
phillystyle123Author Commented:
oops -i need to create another block of code like this:


  $(".modal-window").append("<a class=\"close-window\"></a>");
                $(".close-window").click(function(){modalWindow.close();});
                $(".modal-overlay").click(function(){modalWindow.close();});
 call the class .close-window2 or something - i can't get it to work.

mouseover the 1st thumb on this page to see the modal window:
http://ctemps.cjehost.com/subgallery_4column_with_test.php#
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Well to be honest - using IFRAME in that solution what you need is kind strange, but I assume that you need this for something. So well what you need to do is to call  top.modalWindow.close()  when you click on   back to gallery

instead of:

<a onmousedown="window.returnValue = this.href;modalWindow.close();" href="http://www.google.com">back to gallery</a>

do:

<a onmousedown="window.returnValue = this.href;top.modalWindow.close();" href="http://www.google.com">back to gallery</a>



should be fine as long as both of pages are on one domain:)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
phillystyle123Author Commented:
so close!

mouseover the 1st thumb to get modal window:

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

the modal window now closes! which is one thing i need  - but i'm not being redirected to "detail_vertical.php" - fyi - i tried http://google.com here as well and i wasn't redirected - no error just the modal closes and that's it.
<a onmousedown="window.returnValue = this.href;top.modalWindow.close();" href="detail_vertical.php">view larger</a>

Open in new window

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
have you tried    top.window   ?:)
0
 
Michel PlungjanIT ExpertCommented:
How about

                                                              <a onclick="window.returnValue = this.href;top.modalWindow.close();" href="detail_vertical.php">view larger</a>
0
 
phillystyle123Author Commented:
that's exactly what i ended up with - thanks!  i had a similar question open about this - but it was about closing the modal window and redirecting to another page here are both:

view larger | back to gallery      
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now