<!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邮箱
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
