SimpleModel Resizing the Container

Question

Dear All, I have Used SImple Model, Now Problem Is The Resizing of Modal, I have Confirm Dialog One is Basically Small size after pressing Yes , The Second One is my.php contains large Data,I am Using the concept of Appending Already existing model ,Will any body tell how to Resize the Content

and My JS 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
}

MyCSS:

#

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

Please any one suggest How to Modify the SimpleModal Container Size? on AjaxCall?

Answer 1

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.

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.