modal popup code placement

Is is possible to separate the actual popup message from the page that it is called from? The examples I have found c开发者_JS百科ontain the call to the popup.js file and the div containing the message on the same page.

I'd like to be able to maintain a separate page for the message, but am having trouble implementing.

Thank you.

You can use ajax to load the content into the modal. Just use the callback to trigger the showing of the modal after the content is loaded.

$('#modal-content').load('path/to/content.html', function() {
    $('#modal').show();
}

Where modal-content is the div you wish to place the content in, and where modal is the modal wrap you wish to show.

You could open a separate browser window for your pop-up. I haven't tried to make one window modal over another but you may be able to do so in using the the focus/blur events. Depending on how big your user audience is you may run into trouble with pop-up blockers however. Probably not a good option on the open web.

To take johndavidjohn's answer one step further.... you can use this code to actually add the modal div to the body on the fly, so you don't need to include it.

if (('#modal-content').length() == 0)
    $('body').append('<div class="modal" id="modal-content"></div>');

$('#modal-content').load('path/to/content.html', function() {
    $('#modal').show();
}