NEW jQuery Modal Window – now all mine

Hereby the reproduction of the Modal Window plugin. This time in a version written solely by myself. For new readers I’ve been forced to rewrite my jQuery Modal Window as I have switched jobs. See a lot of demos on the page for the new jQuery Modal Window .

jQuery Modal Window structure

jQuery Modal Window is composed of two parts. jQuery plugin part and then a controller class used to manage the jQuery Modal Window and its contents.

jQuery Modal Window extensions

There is in my new edition a couple of improvements and expansions. jQuery Modal Window can now more easily coorporate with other plugins and there has been some new configuration options to.

jQuery Modal Window cooperative API

To better serve and collaborate with other plugins I have written several auxiliary methods.

jQuery Modal Window Controller

The jQuery Modal Window controller, first a series of public variables that can be accessed to get to the elements and details used by jQuery Modal Window.

• mwc.settings
  The settings that underlie jQuery Modal Window . It is not yet possible to change settings on the fly.
• mwc.modal
  The actual modal window jQuery object
• mwc.modalContent
  Modal window’s contents. The content you choose to display.
• mwc.background
  The background behind the modal window.
• mwc.block
  The jQuery Modal Window container that contains both modal and background

Additionally, jQuery Modal Window now implement a number of methods that can be used from outside the plugin.

• mwc.fireResizeModal (modalCss, ignoreStartEvent, noAnimate)
  This method starts a recalculation and location of the modal window.
  modalCss allows you to send your own measures for the window size and placement. ignoreStartEvent will force jQuery Modal Window not to fire the onModalResize event if it is set to true. noAnimate will ignore any animation when the modal window changes size.
• mwc.calculateModalCSS ()
  This method calculates the position and position modal window. Can be used to get exact dimensions of how large your content may be.
  returns a modalCss.
• mwc.deconstruct ()
  Closes and removes jQuery Modal Window .
• mwc.getScrollBarWidth ()
  Returns the size of the browser’s scrollbar width.

jQuery Modal Window plugin API

I have added an extra method to the jQuery plugin. Here I briefly review all of them.

• jQuery.fn.openModalWindow (settings)
  This method opens a particular content in a new jQuery Modal Window .
• jQuery.fn.closeModalWindow ()
  When called on any element inside the jQuery Modal Window block element it will deconstruct the jQuery Modal Window .
• jQuery.fn.updateModalWindow (modalCss, ignoreStartEvent)
  When called on any element inside the jQuery Modal Window block element it will calculate a new size and position and change the jQuery Modal Window .
• jQuery.fn.getModalWindowControl ()
  This method is new and if it’s called on any element inside the jQuery Modal Window block element it will return the jQuery Modal Window controller object.

Extra Settings

Four new options have been added to the jQuery Modal Window . Two events and two booleans to influence how the jQuery Modal Window behaves.

• settings.noBackground
  If set to true no sandwich paper will appear behind the modal window.
  By default set to false.
• settings.enableModalScroll
  If set to false the jQuery Modal Window do not create scrollbars if the content is too large.
  By default set to true.
• settings.onModalResize
  This event is fired just before the jQuery Modal Window is going to change the size and position of the modal window.
  If you wish to use this event you must resize the modal window yourself.
  By default set to null.
• settings.onModalResized
  This event is fired after the modal window has changed size and position.
  By default set to null.

See all options on the jQuery Modal Window documentation .