Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state.

modal [Boolean:true] (Added in 1.3.4. Name changed from transient in 1.3.5))

User will be unable to interact with the page below the modal or tab away from the dialog. If false, the overlay, iframe, and certain events will be disabled allowing the user to interact with the page below the dialog.

onOpen [Function:null]

The callback function used in place of SimpleModal’s open

onShow [Function:null]

The callback function used after the modal dialog has opened

onClose [Function:null]

The callback function used in place of SimpleModal’s close

For a list of options in previous version, please refer to the appropriate archived documentation page (listed above).

option是键值对格式的,如下：

$("#osx-modal-content").modal({ overlayId: 'osx-overlay', containerId: 'osx-container', closeHTML: null, minHeight: 80, opacity: 65, position: ['0',], overlayClose: true }); CALLBACKS

The callback functions are called using the javascript apply function. One parameter, the dialog object, is sent, which contains the overlay, container, data and iframe objects. In addition, inside the callback, this will refer to the SimpleModal object, which will allow you to access all of the available modal elements and functions.

回调函数是使用javascript的apply函数的， https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply ，一个参数，是一个对象，包含了overlay，container和data还有iframe对象，另外，在回调里面，这个对象会引用simplemodal对象，允许你访问所有的可用的modal元素和function。需要注意的是这里的parameter是一个对象，object。

onOpen: Useful for adding effects to the opening of the modal dialog elements. SimpleModal will handle “showing” the iframe, if necessary.

$("#element-id").modal({onOpen: function (dialog) { //自定义一个对象dialog dialog.overlay.fadeIn('slow', function () { //对象dialog链式调用overlay，控制overlay是用动画fadeIn，在这里再次调用container，再然后是调用data，整个过程链式操作。 dialog.container.slideDown('slow', function () { dialog.data.fadeIn('slow'); }); }); }});

onOpen函数很有用，可以控制弹出这个modal的内容的特效，例如动画，

onShow: Useful for binding events or any other actions you might want to perform after the modal dialog elements have been displayed. If you are including another plugin (TinyMCE, DatePicker, etc.) in a modal dialog, this is where you want to initialize that plugin.

$("#element-id").modal({onShow: function (dialog) { // Access elements inside the dialog // Useful for binding events, initializing other plugins, etc. // For example: $("a", dialog.data).click(function () { // do something return false; }); }});

onClose: Useful for adding effects to the closing of the modal dialog elements. After you’ve applied effects, etc., you’ll need to call $.modal.close(); so SimpleModal can re-insert the data correctly and clean up the dialog elements.

$("#element-id").modal({onClose: function (dialog) { dialog.data.fadeOut('slow', function () { dialog.container.slideUp('slow', function () { dialog.overlay.fadeOut('slow', function () { $.modal.close(); // must call this!这个是必须项。 }); }); }); }});

onClose函数可以控制关闭modal的特效，并且一定要用simplemodal的关闭函数来关闭modal，因为他不仅会关闭modal，还会返回原来的数据，还原原来的页面内容。

EXAMPLES

The following examples are aimed at showing you the various options and callbacks available in SimpleModal.In order to provide some basic styling, all of the examples below are using the default CSS:

#simplemodal-overlay {background-color:#000;} #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}

这是默认的modal的css的属性，简单的话可以直接修改，用新的css覆盖上去即可。

Each example below can be demonstrated by clicking “RUN EXAMPLE”.

// Chained call with no options $("#sample").modal(); // Stand-alone call with no options $.modal($("#sample")); // Enable overlay click-to-close $("#sample").modal({overlayClose:true}); // Change overlay color and opacity $("#sample").modal({ opacity:80, overlayCss: {backgroundColor:"#fff"} }); // Disable focus (allows tabbing away from dialog) $("#sample").modal({focus:false}); // Change min height and width $("#sample").modal({ minHeight:400, minWidth: 600 }); // Manually set position $("#sample").modal({position: [10,10]}); // Manually set position using percentages $("#sample").modal({position: ["50%","50%"]}); // Display an external page using an iframe var src = "http://365.ericmmartin.com/"; $.modal('<iframe src="' + src + '">', { //因为使用灵活地关系，即使一个iframe，里面是别的站的页面也是可以进行操作。 closeHTML:"", containerCss:{ backgroundColor:"#fff", borderColor:"#fff", height:450, padding:0, width:830 }, overlayClose:true }); // Opening animations $("#sample").modal({onOpen: function (dialog) { dialog.overlay.fadeIn('slow', function () { dialog.data.hide(); dialog.container.fadeIn('slow', function () { dialog.data.slideDown('slow'); }); }); }}); // Closing animations $("#sample").modal({onClose: function (dialog) { dialog.data.fadeOut('slow', function () { dialog.container.hide('slow', function () { dialog.overlay.slideUp('slow', function () { $.modal.close(); }); }); }); }});

参考： 感谢ericmmartin写出这么好的插件并且分享出来，下次待我能力足够的时候我在仔细研究您的代码，谢谢。