Can't get Simplemodal to display link content in modal window

Question

I can't seem to get the modal window to show any content from another link. I'm quite sure I've used the correct classes to link them together. This is the basic js given from http://www.ericmmartin.com/projects/simplemodal_v101/ .

jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$(' .basic').click(function (e) {
    $('#basic-modal-content').modal();

    return false;
});});

I've put the basic class onto

<li><a href="about me/about me.html" class='basic'>about me</a></li>

and in the external html link (about me) I put a div id of

<div id="basic-modal-content">
<p> Darrien is an industrial & product designer based from Toronto. My creative approach falls along the line of biomimicry and human-centric design. 
I've recently graduated from the University of Guelph and am currently pursuing my Masters of Industrial Design at Pratt Institute.
Feel free to contact me to just chat and don't forget to look at    some of my work. 
</p>

I've included my code in this zip ( http://www.4shared.com/zip/LGOb7yugba/Darrien_Website_V2.html )

Any help would be much appreciated! :)

Answer 1

You have the following problem :

• User click on your link
• Click event is fired
• Javascript look after some element with ID equals to basic-modal-content
• There is no element with this ID
• The browser load the about page

What you have to do :

• User click on a link (with href='#')
• Click event is fired
• Use JQuery .load() function to load the html content of about page into a specific div
• Call modal with id equals to basic-modal-content
• Javascript will look after basic-modal-content and find it