Opening href in jQuery Dialog

Question

Okay, so I've got the following code to create a dialog of a div within a page:

        $('#modal').dialog({
        autoOpen: false,
        width: 600,
        height: 450,
        modal: true,
        resizable: false,
        draggable: false,
        title: 'Enter Data',
        close: function() { 
            $("#modal .entry_date").datepicker('hide');
        } 
     });

     $('.modal').click(function() {
        $('#modal').dialog('open');
     });

All working fine. But what I want is to also be able to open a link in a dialog window, kinda like...

<a href="/path/to/file.html" class="modal">Open Me!!</a>

I've done this before by hardcoding the path:

$('#modal').load('/path/to/file.html').dialog('open');

but we can't hardcode the path in the javascript (as there will be multiple coming from the database) and I'm struggling to understand how to get this to work. I'm also pretty sure that the answer is really obvious, and I'm merely setting myself up to be humbled by the clever folk here at StackOverflow, but I've scratched my head for long enough this afternoon, so my ego has been put away, and hopefully someone can point me in the right direction...

Thanks Phil

Answer 1

You can just grab the href attribute and load that

$('.modal').click(function(e) {
    e.preventDefault();
    $('#modal').load(this.href).dialog('open');
});

Answer 2

Phil, you need to grab the href attribute:

var link = $('#modal').attr('href');
$('#modal').load(href).dialog('open');