modalpopup for a href

i try to follow the modalpopup from :
http://webcloud.se/article/Building_modal_panels_with_jQuery/

it loads up the a href picture without modal popup,
<head runat="server">
    <title></title>
    <script type="text/javascript">

        $(function() {
            $('a[rel*=modalPanel]').modalPanel();
        });

        (function($) {
            $.fn.extend({
                modalPanel: function() {

                    //Create our overlay object
                    var overlay = $("<div id='modal-overlay'></div>");

                    return this.each(function() {

                        //Listen for clicks on objects passed to the plugin
                        $(this).click(function(e) {

                            //Append the overlay to the document body
                            $("body").append(overlay.click(function() {
                                modalHide();
                            }))

                            //Set the css and fade in our overlay
                            overlay.css("opacity", 0.8);
                            overlay.fadeIn(150);

                            //Prevent the anchor link from loading
                            e.preventDefault();

                            //Activate a listener 
                            $(document).keydown(handleEscape);
                        });
                    });

                    //Our function for hiding the modalbox
                    function modalHide() {

                        $(document).unbind("keydown", handleEscape)
                        var remove = function() {

                            $(this).remove();
                        }
                        overlay.fadeOut(remove);
                    }

                    //Our function that listens for escape key.
                    function handleEscape(e) {

                        if (e.keyCode == 27) {

                            modalHide();
                        }
                    }
                }
            });
        })(jQuery);

       
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
          <Scripts>  
             <asp:ScriptReference Path="~/script/jquery-1.4.2.min.js" ScriptMode="Inherit" />  
          </Scripts>  
       </asp:ScriptManager> 
    </div>
    
    <a href="images/9217_101253476562778_100000343771605_29485_8336008_n.jpg" rel="modalPanel">
    <img src="images/modalbox-1-t.jpg" alt="Photo">
    </a>
    </form>
</body>
</html>

Open in new window

LVL 1
doramail05Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

doramail05Author Commented:
forgot and added <link href="App_Themes/Stylesheet1.css" type="text/css" rel="stylesheet" />
0
Albert Van HalenAnalyst developerCommented:
Rather than registering jquery via scriptmanager I would put a script reference in the head section just above your modal panel script.
0
doramail05Author Commented:
put something like this but still cannot.

<head runat="server">
<script type='text/javascript'
src='../script/jquery-1.4.2.min.js'>
</script>
0
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Albert Van HalenAnalyst developerCommented:
Well, your modal panel doesn't 'load' anything.
Consider this code to add (and extend it further!)
//Set the css and fade in our overlay
overlay.css("opacity", 0.8);
overlay.fadeIn(150);

// create image and set src attribute according to the links' href
var img = $("<img></img>").attr("src", this.href);
// add the image to the overlay-div
overlay.html(img);

Open in new window

0
doramail05Author Commented:
cannot, still the same
//Set the css and fade in our overlay 
                            overlay.css("opacity", 0.8);
                            overlay.fadeIn(150);

                            // create image and set src attribute according to the links' href 
                            var img = $("<img src="images/modalbox-1-t.jpg" alt="Photo">").attr("src", this.href);
                            // add the image to the overlay-div 
                            overlay.html(img);

Open in new window

0
Albert Van HalenAnalyst developerCommented:
You cannot create a jquery object that way. Use the snippet from my previous code.
0
doramail05Author Commented:
also cannot

//Set the css and fade in our overlay
overlay.css("opacity", 0.8);
overlay.fadeIn(150);
 
// create image and set src attribute according to the links' href
var img = $("<img></img>").attr("src", this.href);
// add the image to the overlay-div
overlay.html(img);
0
Albert Van HalenAnalyst developerCommented:
Created a simple page, same as yours; it is working.

Is jquery loaded in your case ?
No script errors ?
<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('a[rel*=modalPanel]').modalPanel();
        });

        (function($) {
        	$.fn.extend({
        		modalPanel: function() {

        			//Create our overlay object
        			var overlay = $("<div id='modal-overlay'></div>");

        			return this.each(function() {

        				//Listen for clicks on objects passed to the plugin
        				$(this).click(function(e) {

        					//Append the overlay to the document body
        					$("body").append(overlay.click(function() {
        						modalHide();
        					}))

        					//Set the css and fade in our overlay
        					overlay.css("opacity", 0.8);
        					overlay.fadeIn(150);
        					var img = $("<img></img>").attr("src", this.href);
        					overlay.html(img);

        					//Prevent the anchor link from loading
        					e.preventDefault();

        					//Activate a listener 
        					$(document).keydown(handleEscape);
        				});
        			});

        			//Our function for hiding the modalbox
        			function modalHide() {

        				$(document).unbind("keydown", handleEscape)
        				var remove = function() {

        					$(this).remove();
        				}
        				overlay.fadeOut(remove);
        			}

        			//Our function that listens for escape key.
        			function handleEscape(e) {

        				if (e.keyCode == 27) {

        					modalHide();
        				}
        			}
        		}
        	});
        })(jQuery);

       
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
       </asp:ScriptManager> 
    </div>
    
    <a href="images/9217_101253476562778_100000343771605_29485_8336008_n.jpg" rel="modalPanel">
		<img src="images/modalbox-1-t.jpg" alt="Photo">
    </a>
    </form>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
doramail05Author Commented:
great it worked

but is it someway to position the image to absolute center
0
Albert Van HalenAnalyst developerCommented:
Your overlay is not positioned and created in the DOM as a child element of the body element.
You can apply text-center as a style in your div and set it to center, but another question rises.

Why are you 'creating' your own lightbox? There are numerous lightbox plugins available for jquery.
It will cover all your needs (positioning, centering, sizing).

Just search the web or the plugin repository on jquery.
0
doramail05Author Commented:
coz im using this to create modal popup from a href, the other article i got is using modalpopup from buttons only :

http://www.malsup.com/jquery/block/#overview
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.