Overview
Usage
SimpleModal provides 2 simple ways to invoke a modal dialog.
As a chained jQuery function, you can call the modal()
function on a jQuery element and a modal dialog will be displayed using the contents of that element. For example:
$("#element-id").modal();
As a stand-alone function, a modal dialog can be created by passing a jQuery object, a DOM element, or a plain string (which can contain HTML). For example:
$.modal("<div><h1>SimpleModal</h1></div>");
Both of the methods described above, also accept an optional options object (nice tongue-twister, huh?). Using the examples above:
$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});
Because SimpleModal is more of a modal dialog framework, both of the examples above would create very basic, unstyled, modal dialogs. Styling can be done through external CSS or through properties in the options object. See the Options section below for a detailed list of the available options.
Styling
Styles can be applied through external CSS, the options object, or both. The CSS options for the modal overlay, container, and data elements are:
overlayCss
, containerCss
and
dataCss
, all which take a key/value object of properties. See the
jQuery CSS Docs for details.
SimpleModal handles setting the necessary CSS for displaying the modal dialog. In addition, SimpleModal dynamically centers the modal dialog, unless the
position
option is used, which takes precedence.
SimpleModal internally defines the following CSS classes: simplemodal-overlay
,
simplemodal-container
, simplemodal-wrap
(SimpleModal will automatically set the
overflow
to auto if the content gets larger than the container), and
simplemodal-data
.
* Note: SimpleModal's default closeHTML option declares the modalCloseImg
class in order to display an image for closing the dialog.
Download the image. Because it is defined in an option, it cannot be styled through the options - an external CSS definition is required:
#simplemodal-container a.modalCloseImg {
background:url(/img/x.png) no-repeat; /* adjust url as required */
width:25px;
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:-15px;
right:-18px;
cursor:pointer;
}
For IE6, you might want to apply the PNG fix:
<!--[if lt IE 7]>
<style type='text/css'>
#simplemodal-container a.modalCloseImg {
background:none;
right:-14px;
width:22px;
height:26px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img/x.png', sizingMethod='scale'
);
}
</style>
<![endif]-->
Demos
In addition to the examples below, I have a collection of demos that feature the different capabilities of SimpleModal:
Download
SimpleModal is hosted on Google Code:
There are two versions available; a full source version that contains comments and is formatted for readability, and a minified version with all comments and formatting removed. The full version is recommended for learning and testing, the minified version is for production use.
Archives
Previous version of SimpleModal documentation: v1.2.x, v1.1.x, v1.0.x
Options & Callbacks
Options
The following is a list of current options. Default values are indicated with: [Type:Value]
-
appendTo
[String:'body']
The jQuery selector to append the elements to. For ASP.NET, use 'form'. -
focus
[Boolean:true] (Changed in 1.4)
Focus in the first visible, enabled element? -
opacity
[Number:50]
The opacity value for the overlay div, from 0 - 100 -
overlayId
[String:'simplemodal-overlay']
The DOM element id for the overlay div -
overlayCss
[Object:{}]
The CSS styling for the overlay div -
containerId
[String:'simplemodal-container']
The DOM element id for the container div -
containerCss
[Object:{}]
The CSS styling for the container div -
dataId
[String:'simplemodal-data']
The DOM element id for the data div -
dataCss
[Object:{}]
The CSS styling for the data div -
minHeight
[Number:null]
The minimum height for the container -
minWidth
[Number:null]
The minimum width for the container -
maxHeight
[Number:null]
The maximum height for the container. If not specified, the window height is used. -
maxWidth
[Number:null]
The maximum width for the container. If not specified, the window width is used. -
autoResize
[Boolean:false] (Changed in 1.4)
Resize the container if it exceeds the browser window dimensions? -
autoPosition
[Boolean:true] (Changed in 1.4)
Automatically position the container upon creation and on window resize? -
zIndex
[Number: 1000]
Starting z-index value -
close
[Boolean:true]
If true,closeHTML
,escClose
andoverlayClose
will be used if set. If false, none of them will be used. -
closeHTML
[String:'']
The HTML for the default close link. SimpleModal will automatically add the closeClass to this element. -
closeClass
[String:'simplemodal-close']
The CSS class used to bind to the close event -
escClose
[Boolean:true]
Allow Esc keypress to close the dialog? -
overlayClose
[Boolean:false]
Allow click on overlay to close the dialog? -
position
[Array:null]
Position of container [top, left]. Can be number of pixels or percentage -
persist
[Boolean:false]
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 fromtransient
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).
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.
-
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.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
});
});
}});
-
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!
});
});
});
}});
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;}
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 + '" height="450" width="830" style="border:0">', {
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();
});
});
});
}});
Other Notes
Closing the Dialog
SimpleModal will automatically bind the close function (using the onclick event) to any element inside the dialog with the
simplemodal-close
class.
In addition, you can programmatically close the currently opened dialog by calling
$.modal.close();
Default Values
If you have a value that you want to be used for all modal dialogs, instead of passing the option in for each one, you can globally modify the defaults.
Example – Single Property:
$.modal.defaults.closeClass = "modalClose";
Example – Multiple Properties:
$.extend($.modal.defaults, {
closeClass: "modalClose",
closeHTML: "<a href='#'>Close</a>"
});
Data CSS Display Property
SimpleModal "hides" the data when it adds it to the modal dialog. If you use an
onOpen
callback, the dialog.data display value will have been set to
none
and you’ll need to explicitly "un-hide" the element.
Cloning and Element Removal
- By default, SimpleModal will clone the data element that you pass in. When the dialog is closed, the cloned, unchanged, data element will be re-inserted into DOM in its original place. If the
persist
option is true, SimpleModal will "re-insert" the original element, with changes intact. If you use anonClose
callback, you’ll need to call$.modal.close();
(see theonClose
in the Options & Callback section above). - SimpleModal always removes the overlay, container and iframe elements when closed. If you use an
onClose
callback, you’ll need to call$.modal.close();
(see theonClose
in the Options & Callback section above)
Known Issues
- If you experience problems with the overlay not filling the entire page, try these suggestions: If the overlay is not extending to the bottom of the page, set the body height to 100%. If there is a small, white border on the right or bottom of the page, set the margin of the body to 0px. Tips provided by Daniel Kellogg.
- In IE6, the state of checkboxes and radio buttons are not maintained using the
persist
option. - In IE7, the state of radio buttons is not maintained using the
persist
option. - To prevent Flash objects from "bleeding through" the dialog, make sure to set the
wmode
property for yourobject
andembed
elements to eitheropaque
ortransparent
(reference). - For YouTube videos (and perhaps other objects), add
type="application/x-shockwave-flash"
in the object tag to prevent issues in IE6. Tip provided by Jimish Shah.
Browser Compatibility
SimpleModal has been tested in the following browsers:
- IE 6, 7, 8, 9
- Firefox 2, 3, 4
- Opera 9, 10
- Safari 3, 4, 5
- Chrome 1, 2, 3, 4, 5, 6
Support
From Me
For questions, issues or feature requests, please post them on stackoverflow or in the jQuery Google Group.
If you are interested in SimpleModal consulting or customizations, contact me directly and I will provide you with a quote.
If you contact me directly asking for (free) support, know that, despite my best intentions, it may take me a while to get back to you, if at all.
From You
If you would like to contribute, the following is a list of ways you can help:
- Help other SimpleModal users in the jQuery Google Group or on stackoverflow
- Blog about or link to SimpleModal so others can find out about it
- Report issues, provide feedback, request features, etc.
- Rate SimpleModal on the jQuery Plugins Page
- Make a $1 donation
Sample Data
This is some sample data from the current page
You can press ESC to close this dialog or click close.
相关推荐
NULL 博文链接:https://hangyu608.iteye.com/blog/953056
1. 简单模式(Simple Mode): - 简单模式是最基本的消息传递模式,也是最简单的模式。生产者将消息发送到队列,消费者从队列中接收并处理消息。这是一对一的方式。 2. 工作队列模式(Work Queue Mode): - 工作...
CCS 6 的官方英文教程,使用该教程可以入门CCS的基本使用以及操作!
Simple mode allows to easily pick functions for protection, adjust options and get the protected file with just a few mouse clicks. Expert mode is for advanced users, it shows assembly code, allows ...
最下面有一个叫“Setup Mouse Mode”的按钮,我们先通过它来改变主界面的鼠标使用习惯,点击后,出现多一个窗口(如下),按下图设置,使用鼠标左键来进行主操作方式。 “Setup Mouse Mode”按钮上面有一个选项,...
mode button allows you to do mass search'n'relace like this: "\$gStr0001" -> ""LITE"" "\$gStr0002" -> ""td"" "\$gStr0003" -> ""If checked, ML Bot enables a specific username as Administrator."" ? ...
Python网页搜寻器 ...-s / --simple | Simple mode formatting, usable to parsing site | default: False -t / --threads | Count threads of crawler workers | default: 1 -v / -vv / -vvv | logging level
一个名为simpleMode的新UI 支持本地化 支持Apple Silicon Mac 每个按钮都可以自定义 除左侧部分外的每个文本元素都可以自定义 操作系统支持 已测试以下操作系统和版本。 11.0、11.0.1、11.1、11.2、11.2.1 故障...
用stm32调试一段时间的SI4463 网上下的代码到我这里用不了,移植官网的51的... 后面就是要测试传输距离,丢包率等,以及后面会修改single_way_simple_with_field,single_way_with_field_4GFSK带码,比较具体的传输效率
语言:English (United States) 一个用于反转任何网页/网站颜色的插件,可减轻您对任何网站内容的压力。 反转任何网页/网站的颜色,如果您在昏暗的房间中浏览互联网,则可以轻松浏览任何网站的内容,并减轻您的压力。...
语言:English 使用简单CSS过滤器,只需单击一下即可在黑暗模式下显示任何网站。 使用简单CSS过滤器,只需单击一下即可在黑暗模式下显示任何网站。
简单暗模式 Wordpress的简单Darkmode插件
Simple Markdown Simple Markdown is simply a Markdown editor :) I wrote it to offer up an open source alternative to the other Markdown editors available on the Play Store. I also wanted to get some ...
Li-Ion battery charger controller that uses a current mode PWM step-down (buck) switching architecture. With a 700kHz switching frequency, theHM8207 provides a small, simple and efficient solution to ...
FOR OPTICAL MODE CALCULATION IN SIMPLE WAVEGUIDES % wg_1D_mode_profile.m - Calculate the 1D mode profile of a waveguide % - function returns mode profiles for TE and TM modes (E, H components)
一个插件反转任何网页/网站的颜色,使任何网站的内容减轻你的眼睛压力。 如果你在黑暗的房间里上网,反转任何网页/网站的颜色,使得任何网站的内容都可读,减少压力。 ... 支持语言:English (United States)
engine-mode:次要模式,用于通过Emacs定义和查询搜索引擎
$ cd angular-simple-server $ npm install $ PRERENDER_SERVICE_URL=http://localhost:3000 node server 高级用法 显示可用任务 $ grunt 运行服务器 $ node server $ # OR $ grunt serve # run by nodemon 部署 $ ...
# Runs frontend code in watch mode npm run dev # Runs the server go run simple-auth/cmd/server 建筑 go build -o simple-auth-server simple-auth/cmd/server npm run build 或与码头工人 docker build . ...
npm i simple-angular-server -g 安装这个全局后。 现在这可以通过 LINUX 命令angularserver访问 例子 目录结构(Serve dist文件夹) 让我们假设完整的/home/user/myAngularApp/dist应用程序path是/home/user/...