fumodal for jQuery

modal window plugin

Examples:

• Open Example 1 show code hide code

  <script type="text/javascript">
  	$(function() {
  		$("#example_1").bind("click", function(ev) {
  			var settings = new Object();
  			settings.width = 300;
  			settings.height = 160;
  			settings.style = true;
  			settings.title = "<h3>Example 1</h3>";
  			settings.content = "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>";
  			$.fumodal(settings);
  			return false;				   
  		});
  	});
  </script>

• Open Example 2 show code hide code

  <script type="text/javascript">
  	$(function() {
  		$("#example_2").bind("click", function(ev) {
  			var settings = new Object();
  			settings.width = 480;
  			settings.height = 365;
  			settings.overlayColor = "#000000";
  			settings.overlayOpacity = 0.9;
  			settings.style = false;
  			settings.content = "<img title=\"Click to close\" src=\"images/image.jpg\" style=\"cursor:pointer;\" onclick=\"$.fumodal_close()\"/>";
  			$.fumodal(settings);
  			return false;				   
  		});
  	});
  </script>

• Open Example 3 show code hide code

  <script type="text/javascript">
  	$(function() {
  		$("#example_3").bind("click", function(ev) {
  			var settings = new Object();
  			settings.width = 300;
  			settings.height = 200;
  			settings.backgroundColor = "#ffffff";
  			settings.overlayColor = "#000000";
  			settings.overlayOpacity = 0.9;
  			settings.style = false;
  			settings.content = "<div style=\"text-align:center;margin-top:40px\"><a id=\"button_close\" style=\"font-size:60px;\" href=\"#\">Close</a></div>";
  			$.fumodal(settings);
  			$("a#button_close").bind("click", function() {
  				$.fumodal_close();
  				return false;
  			});
  			return false;				   
  		});
  	});
  </script>

Options:

width - window width
height - window height
backgroundColor - background color of the window
overlayColor
overlayOpacity
url - url of the page to load
data - data to be posted to the page you are loading
callback - function to execute after the page is loaded
style - set to true if you want a window with title bar, borders and closing button
title - title bar text
content - if you don't pass url then this is your window's content
zIndex - default is 1000
fade - set to false if you don't like fading animation