jquery响应式模态窗口插件jquery.edbox

旧城等待， 2022-05-28 02:51 268阅读 0赞

##### 简要教程 #####

jquery.edbox.js是一款轻量级的jquery响应式模态窗口插件。通过该jquery模态窗口插件，你可以轻松的制作出响应式的，带动画效果的，可基于AJAX的模态对话框效果。它的特点还有：

*  可以通过CSS来改变模态窗口的样式。
 *  可以自定义模态窗口的头部和脚部内容。
 *  可以自定义加载的loading效果。
 *  支持多种格式的内容：HTML，文本，图片和AJAX内容等。
 *  支持4种alert情景模式：success，info，warning 和 danger。
 *  可自定义打开和关闭模态窗口的动画。
 *  支持回调方法。

###  安装 ###

可以通过npm或yarn来安装jquery.edbox.js插件。

###  使用方法 ###

在页面中引入edbox.css文件,jquery和jquery.edbox.js文件。

<table style="border-spacing:0px;border:0px;float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:879px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
 <tbody style="float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
  <tr style="border-top-width:0px;float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
   <td style="padding:0px;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:879px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
    <div style="padding:0px;margin:0px;width:auto;border:0px;float:none;height:auto;vertical-align:baseline;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&lt;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">link</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">href</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">=</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">"dist/edbox.css"</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">rel</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">=</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">"stylesheet"</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&gt;</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&lt;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">script</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">src</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">=</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">"js/jquery.min.js"</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&gt;&lt;/</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">script</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&gt;</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&lt;</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">script</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">src</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">=</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">"js/jquery.edbox.js"</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&gt;&lt;/</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(41,128,185);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">script</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

#####  HTML结构 #####

最简单的模态窗口的使用方法是使用一个`<div>`来作为模态窗口内容的容器，在它里面可以放置HTML，文本，图片和AJAX内容等。

然后通过一个超链接或按钮来触发模态窗口。

#####  初始化插件 #####

在页面DOM元素加载完毕之后，通过`edbox();`方法来初始化该模态窗口插件。

#####  模态窗口中加载HTML，图片和AJAX内容 #####

在模态窗口中加载HTML内容的方法如下：在`data-box-html`属性中填写你的HTML内容即可。

添加图片的方法如下：

添加AJAX内容的方法如下：

###  配置参数 ###

jquery.edbox.js模态窗口插件的可用配置参数有：

<table style="border-spacing:0px;width:879px;max-width:100%;margin-bottom:20px;border:1px solid rgb(221,221,221);background-color:transparent;"> 
 <thead> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;border-top-width:0px;border-bottom-width:2px;">参数</td> 
   <td style="line-height:1.42857;vertical-align:top;border-top-width:0px;border-bottom-width:2px;">data属性</td> 
   <td style="line-height:1.42857;vertical-align:top;border-top-width:0px;border-bottom-width:2px;">类型</td> 
   <td style="line-height:1.42857;vertical-align:top;border-top-width:0px;border-bottom-width:2px;">默认值</td> 
   <td style="line-height:1.42857;vertical-align:top;border-top-width:0px;border-bottom-width:2px;">描述</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">target</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-target</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">string</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">null</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">DOM 元素</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">copy</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-copy</td> 
   <td style="line-height:1.42857;vertical-align:top;">boolean</td> 
   <td style="line-height:1.42857;vertical-align:top;">false</td> 
   <td style="line-height:1.42857;vertical-align:top;">使用复制的元素来代替自己。仅对target选项有效。</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">html</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-html</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">string</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">null</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">html 或 text</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">image</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-image</td> 
   <td style="line-height:1.42857;vertical-align:top;">string</td> 
   <td style="line-height:1.42857;vertical-align:top;">null</td> 
   <td style="line-height:1.42857;vertical-align:top;">图片的路径</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">url</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-url</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">string</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">null</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">url 路径 (files, pages等...)</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">success</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-success</td> 
   <td style="line-height:1.42857;vertical-align:top;">string</td> 
   <td style="line-height:1.42857;vertical-align:top;">null</td> 
   <td style="line-height:1.42857;vertical-align:top;">Alert success</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">info</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-info</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">string</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">null</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">Alert info</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">warning</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-warning</td> 
   <td style="line-height:1.42857;vertical-align:top;">string</td> 
   <td style="line-height:1.42857;vertical-align:top;">null</td> 
   <td style="line-height:1.42857;vertical-align:top;">Alert warning</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">danger</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-danger</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">string</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">null</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">Alert danger</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">header</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-header</td> 
   <td style="line-height:1.42857;vertical-align:top;">string</td> 
   <td style="line-height:1.42857;vertical-align:top;">null</td> 
   <td style="line-height:1.42857;vertical-align:top;">可选的 header 标签 - 可以是html 或 text</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">footer</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-footer</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">string</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">null</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">可选的 footer 标签 - 可以是html 或 text</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">width</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-width</td> 
   <td style="line-height:1.42857;vertical-align:top;">number</td> 
   <td style="line-height:1.42857;vertical-align:top;">null</td> 
   <td style="line-height:1.42857;vertical-align:top;">为模态窗口设置一个固定的宽度</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">height</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-height</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">number</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">null</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">为模态窗口设置一个固定的高度</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">addClass</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-add-class</td> 
   <td style="line-height:1.42857;vertical-align:top;">string</td> 
   <td style="line-height:1.42857;vertical-align:top;">null</td> 
   <td style="line-height:1.42857;vertical-align:top;">为模态窗口设置一个指定的class名称</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">close</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-close</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">boolean</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">true</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">模态窗口是否可以关闭&nbsp;<br>events: keydown (esc) / click ('x' icon or outside the modal)</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">animation</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-animation</td> 
   <td style="line-height:1.42857;vertical-align:top;">boolean</td> 
   <td style="line-height:1.42857;vertical-align:top;">true</td> 
   <td style="line-height:1.42857;vertical-align:top;">模态窗口是否可以动画</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">animateOpen</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-animate-open</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">string</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">'edbox-animate-open'</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">模态窗口打开时的CSS动画</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">animateClose</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-animate-close</td> 
   <td style="line-height:1.42857;vertical-align:top;">string</td> 
   <td style="line-height:1.42857;vertical-align:top;">'edbox-animate-close'</td> 
   <td style="line-height:1.42857;vertical-align:top;">模态窗口关闭时的CSS动画</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">beforeOpen</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-before-open</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">function</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">function() {}</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">模态窗口打开时的回调函数</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">afterOpen</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-after-open</td> 
   <td style="line-height:1.42857;vertical-align:top;">function</td> 
   <td style="line-height:1.42857;vertical-align:top;">function() {}</td> 
   <td style="line-height:1.42857;vertical-align:top;">模态窗口关闭时的回调函数</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">beforeClose</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">data-box-before-close</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">function</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">function() {}</td> 
   <td style="line-height:1.42857;vertical-align:top;background-color:rgb(249,249,249);">模态窗口关闭之前的回调函数</td> 
  </tr> 
  <tr> 
   <td style="line-height:1.42857;vertical-align:top;">afterClose</td> 
   <td style="line-height:1.42857;vertical-align:top;">data-box-after-close</td> 
   <td style="line-height:1.42857;vertical-align:top;">function</td> 
   <td style="line-height:1.42857;vertical-align:top;">function() {}</td> 
   <td style="line-height:1.42857;vertical-align:top;">模态窗口关闭之后的回调函数</td> 
  </tr> 
 </tbody> 
</table>

###  方法 ###

jquery.edbox.js模态窗口插件的可用方法有：

<table style="border-spacing:0px;border:0px;float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:879px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
 <tbody style="float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
  <tr style="border-top-width:0px;float:none;height:auto;margin:0px;padding:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
   <td style="padding:0px;border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:879px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
    <div style="padding:0px;margin:0px;width:auto;border:0px;float:none;height:auto;vertical-align:baseline;letter-spacing:0px;min-height:0px;background:0px 0px;"> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(177,187,197);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">//set edbox for the set of matched elements</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">$(</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">'.myModalLink'</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">).edbox({ options });</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">$(</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">'[edbox]'</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">).edbox({ options });</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;">
       &nbsp; 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(177,187,197);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">//Init without assigning any element</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">$.edbox({ options });</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;">
       &nbsp; 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(177,187,197);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">//Make custom settings as defaults</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">$.edboxSettings({ options });</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;">
       &nbsp; 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(177,187,197);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">//Close event</code> 
     </div> 
     <div style="border:0px;float:none;height:auto;margin:0px;padding:0px 1em;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;white-space:pre;background:0px 0px;"> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">$.edbox(</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(239,110,126);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">'close'</code> 
      <code style="font-size:12.3165px;padding:0px;font-family:'Source Code Pro', 'Courier New', Courier, monospace;color:rgb(52,73,94);border:0px;float:none;height:auto;margin:0px;vertical-align:baseline;width:auto;letter-spacing:0px;min-height:0px;background:0px 0px;">);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

参考资料：http://www.makeru.com.cn/