<!DOCTYPE html><html><head><title> SimpleModal Basic Modal Dialog </title><meta name='author' content='Eric Martin' /><meta name='copyright' content='2010 - Eric Martin' />
<!-- Page styles --><link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Contact Form CSS files --><link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<!-- IE6 "fix" for the close png image --><!--[if lt IE 7]><link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' /><![endif]-->
<!-- JS files are loaded at the bottom of the page --></head><body><div id='container'> <div id='logo'> <h1>Simple<span>Modal</span></h1> <span class='title'>A Modal Dialog Framework Plugin for jQuery</span> </div> <div id='content'> <div id='basic-modal'> <h3>Basic Modal Dialog</h3> <p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p> <input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a> </div> <!-- modal content --> <div id="basic-modal-content"> <h3>Basic Modal Dialog</h3> <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p> <p>Examples:</p> <p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p> <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p> <p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p> <p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p> <p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p> </div>
<!-- preload the images --> <div style='display:none'> <img src='img/basic/x.png' alt='' /> </div> </div> <div id='footer'> © 2010 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a> | <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a> </div></div>
<p> <!-- Load jQuery, SimpleModal and Basic JS files --></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p>dffdf <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <script type='text/javascript' src='js/basic.js'></script></p></body></html>
base.js内容
jQuery(function ($) { // Load dialog on page load //$('#basic-modal-content').modal();
// Load dialog on click $('#basic-modal .basic').click(function (e) { $('#basic-modal-content').modal();
return false; });});
选项和回调选项 以下是当前选项的一个列表，默认值在[Type:Value]中说明 appendTo [String:'body'] focus [Boolean:true] 把焦点保持在模态窗口（modal dialog）上 opacity [Number:50] 设置overlay div的不透明度，1-100 overlayId [String:'simplemodal-overlay'] overlay div的DOM元素的ID overlayCss [Object:{}] overlay div的CSS样式 containerId [String:'simplemodal-container'] container div的DOM元素的ID containerCss [Object:{}] container div的CSS样式 dataId [String:''] data div的DOM元素的ID dataCss [Object:{}] data div的CSS样式 minHeight [Number:200] container的最小高度 minWidth [Number:200] container的最小宽度 maxHeight [Number:null] container的最大高度，如果没有说明则使用window的高度 maxWidth [Number:null] container的最大宽度，如果没有说明则使用window的宽度 autoResize [Boolean:false] 当window调整大小时调整container的大小，使用时需小心，因为它可能会发生不可预知的效果。 zIndex [Number:1000] z-Index的起始值 close [Boolean:true] 如果为true，那么closeHTML,escClose,overClose将被使用，反之则不使用。 closeHTML [String:''] closeClass [String:'simplemodal-close'] escClose [Boolean:true] overlayClose [Boolean:false] position [Array:null] persist [Boolean:false] onOpen [Function:null] onShow [Function:null] onClose [Function:null]回调 回调函数使用JavaScript的apply函数来调用例子附件见126.com邮箱
