SimpleModal resizing the container

Question

I have used SimpleModal. Now the problem is the resizing of the modal dialog. I have a confirm dialog, and it is basically small after pressing Yes.

The second one is my.php and it contains large data. I am using the concept of appending an already existing model. How do I resize the content?

And my JavaScript snippet has:

$(document).ready(function () {
    $('#confirmbutton, #confirmDialog a.confirm').click(function (e) {
        e.preventDefault();

        confirm("Continue to the SimpleModal project page?", function () {
        window.location.href = 'http://localdata/';
        });
    });
});

function confirm(message, callback) {
    $('#confirm').modal({
        close:false,
        position: ["20%",],
        overlayId:'confirmModalOverlay',
        containerId:'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);

            // If the user clicks "yes"
            dialog.data.find('.yes').click(function () {
                // Call the callback
                // $.modal.close();

                $.get("my.php", function (data) {
                    /* Sample response:
                     *   <div id="title">My title</div>
                     *   <div id="message">My message</div>
                     *
                    */

                    var resp = $("<div/>").append(data);
                    var title = resp.find("#title").html(),
                    message = resp.find("#message").html();
                    dialog.data.find(".header span").html(title);
                    dialog.data.find(".message").html(message);
                    dialog.data.find(".buttons .yes").hide();
                    dialog.data.find(".buttons .no").hide();

                    //dialog.data.find(".buttons .no").html("Close");

                    // No need to call the callback or $.modal.close()
                });// End for click
            });//End for on show
        } //End for modal
    }); //Close for modal
}

My CSS:

confirmModalContainer {height:700px; width:700px; font-family:'Trebuchet MS', Verdana, Arial; font-size:16px; text-align:left; background:#fff; border:2px solid #336699;}

How do I modify the SimpleModal container size? On an Ajax call?

Answer 1

Just do this....

$("#simplemodal-container").css('height', 'auto'); //To reset the container.
$(window).trigger('resize.simplemodal');           //To refresh the modal dialog.

Answer 2

I'd like to suggest a simpler and more flexible solution:

Visit http://www.ericmmartin.com/simplemodal-test/, run the following code in Firebug and then click on "button" in the dialog to resize it.

// Inject a CSS class into the document
$('head style[type=text/css]').append('.wide{width:750px !important;}');

$('#modalContentTest').modal({
  onShow:function(dialog){
    dialog.data.find('.animate').click(function(){

      // You can put this code in your "my.php" callback

      dialog.container.addClass('wide');

      /*
      // OR set the width explicitly
      // (make sure you remove the addClass line if you want to use this)
      dialog.container.width(700);
      */

      /*
        Force SimpleModal to reposition the 
        dialog by triggering its resize event
      */
      $(window).trigger('resize.simplemodal');

    }); //end click
  } // end onShow
}); // end modal

With this method you don't have to define new CSS to re-center the dialog and you can let SimpleModal take care of browser inconsistencies.

Answer 3

You can do it by adding and removing classes for the modalContainer element.

Fog Creek Copilot uses SimpleModal, with two sizes, normal and wide. If you go Copilot and click 'Log In', you'll see the normal size. Now, put into Firebug's console

>> $('.modalContainer').addClass('wide')

You should see the container get wider. All you have to do to make this work on your site is define classes for all the sizes you want, and add and remove them dynamically.