simplemodal, close and then immediately reopen

Question

I'm tyring to use the simplemodal jquery plugin to display some HTML. I have an ajax button in this html that when pressed will return some wider HTML content to the modal box.

There doesn't seem to be a way to make simplemodal "aware" of this and have it autoresize, so waht I'd like to do is just kill the modal when the ajax button is pressed and then recreate it after the content has been returned and let the inital autosize handle it. However I can't figure out how to make this work.

So far i have:

$('#Element input.Ajax').click(function (e) {

//Get Ajax content and return to div 

$.modal.close();

$('#Element').modal(
           {
           onOpen: function (dialog) 
        {
        dialog.overlay.fadeIn('slow', function () 
            {dialog.data.hide();
             dialog.container.fadeIn('slow', function ()  
             {dialog.data.slideDown('slow');});
            });
         },
      onClose: function (dialog) 
       {
       dialog.data.fadeOut('slow', function () 
        {
        dialog.container.hide('slow', function () 
         {
         dialog.overlay.fadeOut('slow', function () 
          {$.modal.close();});
         });
        });
       },
      overlayClose:true,
      opacity: 75,
           });

But all this code does is close the overlay without reopening.

Answer 1

You could also determine the dimensions of the new data and resize the container accordingly.

However, based on your method, you could do something like:

// inside the onShow callback for the first modal, bind the click event
onShow: function (dialog) {
    $('#Element input.Ajax', dialog.container[0]).click(function (e) {
        $("#new-modal").load("page.html", function () {
            $("#new-modal").modal({
                // your options
            });
        });
    });
}

Hope that helps.

-Eric