SimpleModal Tests

• Chained Function - default options

  $('#modalContentTest').modal();

• Modal Function w/ jQuery DOM attached element - default options

  $.modal($('#modalContentTest'));

• Chained Function w/ jQuery DOM unattached element - default options

  $('<div><h1>New DOM Element</h1></div>').modal();

• Modal Function w/ DOM element - default options

  $.modal(document.getElementById('modalContentTest'));

• Modal Function w/ HTML - default options

  $.modal("<div class='test'>\
  		<h1>Sample Content</h1>\
  		<p>This can be complex HTML containing <a href='#'>links</a>,\
  		<input type='text' value='input boxes' size='8'/>, etc...</p>\
  	 </div>");

• Modal Function w/ string - default options

  $.modal("Sample Content - just a plain 'ol string");

• Data overflow test

  $('#modalContentOverflowTest').modal({maxHeight:400, maxWidth:600});

• Overlay Close

  $('#modalContent').modal({overlayClose:true});

• Min height

  $('>h1<Test>/h1<').modal({minHeight:400});

• Min width

  $('>h1<Test>/h1<').modal({minWidth:600});

• Max height

  $('#modalContentOverflowTest').modal({maxHeight:500});

• Max width

  $('#modalContentOverflowTest').modal({maxWidth:700});

• Max height/width

  $('#modalContentOverflowTest').modal({maxHeight:500, maxWidth:700});

• Disable focus

  $('#modalContentTest').modal({focus:false});

• Modal Function w/ string/HTML - close: false

  $.modal("<div class='test'>\
  		<h1>Sample Content</h1>\
  		<p>This example uses a custom close.</p>\
  		<p><a href='#' class='simplemodal-close'>Close</a></p>\
  	 </div>", {close: false});

• Chained Function w/ DOM element - persist: true

  $('#modalContentPersistTest').modal({persist: true});

• onOpen callback function - onOpen: function

  $('#modalContentTest').modal({onOpen: modalOpen});

  /**
   * When the open event is called, this function will be used to 'open'
   * the overlay, container and data portions of the modal dialog.
   *
   * onOpen callbacks need to handle 'opening' the overlay, container
   * and data.
   */
  function modalOpen (dialog) {
  	dialog.overlay.fadeIn('slow', function () {
  		dialog.container.fadeIn('slow', function () {
  			dialog.data.hide().slideDown('slow');	 
  		});
  	});
  }

• onClose callback function - onClose: function

  $('#modalContentTest').modal({onClose: simplemodal-close});

  /**
   * When the close event is called, this function will be used to 'close'
   * the overlay, container and data portions of the modal dialog.
   *
   * The SimpleModal close function will still perform some actions that
   * don't need to be handled here.
   *
   * onClose callbacks need to handle 'closing' the overlay, container
   * and data.
   */
  function simplemodal-close (dialog) {
  	dialog.data.fadeOut('slow', function () {
  		dialog.container.hide('slow', function () {
  			dialog.overlay.slideUp('slow', function () {
  				$.modal.close();
  			});
  		});
  	});
  }

• onShow callback function - onShow: function

  $('#modalContentTest').modal({onShow: modalShow});

  /**
   * After the dialog is show, this callback will bind some effects
   * to the data when the 'button' button is clicked.
   *
   * This callback is completely user based; SimpleModal does not have
   * a matching function.
   */
  function modalShow (dialog) {
  	$('input.animate').one('click', function () {
  		dialog.data.slideUp('slow', function () {
  			dialog.data.slideDown('slow');
  		});
  	});
  }

• IE SELECT bleed test

  Make sure the select options do not bleed through the modal dialog.

  option1 option2 option3 option4 option5
• Position test (both) - position: [20,20]

  $('#modalContentTest').modal({position: [20,20]});

• Position test (top only) - position: [20,]

  $('#modalContentTest').modal({position: [20,]});

• Position test (left only) - position: [,20]

  $('#modalContentTest').modal({position: [,20]});

• Position test (px) - position: ["40px","40px"]

  $('#modalContentTest').modal({position: ["40px","40px"]});

• Position test (%) - position: ["25%","25%"]

  $('#modalContentTest').modal({position: ["25%","25%"]});

• Horizontal test

  $('#modalContentTest').modal();

  Wide Content - for horizontal scroll testing
• Doctypes:
  • quirksmode
  • html-4.01-frameset
  • html-4.01-strict.html
  • html-4.01-transitional
  • xhtml-1.0-frameset
  • xhtml-1.0-strict
  • xhtml-1.0-transitional
  • xhtml-1.1