Hello,
I’m having two issues with the SimpleModal jQuery plugin that I’m sure
someone knows the answers to. Essentially, I am using SimpleModal to
display informational windows/forms and I encountered an issue when
loading the display content via Ajax. To ensure that the rendering
problems were not a symptom of the HTML snippet that is being loaded,
I removed the Ajax call and embedded the content directly into the div
container - the page behaved correctly. If I load the exact same HTML
snippet via Ajax, I have encountered the following two issues:
- The “Close” button (which has the simplemodal-close class associated
to it) does not seem to close the modal window when clicked
- The positioning of the modal window has been calculated as if the
div containing the content was empty, so the window appears towards
the bottom of the screen
It would seem that an extra step needs to be taken after loading the
content via Ajax so that it is correctly processed by the Simple Modal
logic. Does anyone know what I would need to do to make this happen?
The following is my code that loads the content via Ajax:
function testSimpleModal()
{
$("#dialog").load("/snippet.html");
$("#dialog").modal({
overlay:80,
overlayCss: {backgroundColor:"#000"},
onShow: function (dialog){
$("#dialog.simplemodal-close").click(function (e)
{
alert(""); // Test to see if forcing an event handler
solves
the issue
$.modal.close();
});
}
});
}
… and of course the div that is holding the content can’t get much
simpler:
<div id="dialog" style="display:none"></div>
