弹出第1层:jQuery 盒子(一)使用介绍

1.在官网下载并修改插件到最新版本(http://plugins.jquery.com/files/boxy-0.1.4.zip)。我写这些文字的时候，最新的版本是0.1.4版本。下载解压后，有一个主js文件：jquery . boxy . js；1个css文件；还有四张图片用于形成弹出层的四个圆角。将文件引入系统，修改boxy.css，将下面的图片路径改为项目中的实际位置。如果设置不正确，图片将无效，到时候会很难看。复制代码如下： /*将这里的图片修改为图片文件相对于css文件的路径*/。boxy-wrapper .左上角{background:url('./images/boxy-NW . png’；} .盒子包装。右上角{ background: url('./images/boxy-ne . png’；} .盒子包装。右下角{ background: url('./images/boxy-se . png ')；} .盒子包装。左下角{ background: url('./images/boxy-SW . png ')；}/*请注意，以下的路径必须采用绝对路径或url的形式*//*绝对路径以“/”开头，表示域名。使用时注意虚拟目录，什么都不能省略。/网站中域名/图片的路径*//*url是指http://www.xxx.com/xxx.png */的形式。box-wrapper . top-left { # background 33366。# filter : progid : maximagettransform。Microsoft . AlphaImageLoader(src='/images/boxy-NW . png ')；} .盒子包装。右上角{ # background: none# filter : progid : maximagettransform。Microsoft . AlphaImageLoader(src='/images/boxy-ne . png ')；} .盒子包装。右下角{ # background: none# filter : progid : maximagettransform。Microsoft . AlphaImageLoader(src='/images/boxy-se . png ')；} .盒子包装。左下角{ # background: none# filter : progid : maximagettransform。Microsoft . AlphaImageLoader(src='/images/boxy-SW . png ')；} 2.将插件引用到页面上，并按照如下方式复制代码： script src=' http :3358 www.cnblogs.com/contents/js/jquery-1.5.js'类型=' text/JavaScript'/脚本链接href='boxy.css' rel='样式表'类型='text/css' /脚本src='http:jquery.boxy.js '类型=' text/JavaScript '/脚本3、按照如下方式复制匹配元素绑定boxy行为的代码：3360boxy’)。boxy()；});/script a href=' # m1 ' class=' boxy ' title='这是超链接的标题' 3.1。我点击后会弹出一个对话框/a div id=' m1 ' style=' display 3360 none '我是超链接弹出/div 。

如果没有设置A标签中的标题，弹出框将没有标题，无法拖动；href后面的锚点m1是要弹出的对应元素id；默认情况下，如果显示元素设置为无，则弹出时会设置显示。3.2.指定的页面内容复制代码会弹出如下： Script Type=' text/JavaScript ' $(function(){ $(')。boxy’)。boxy()；});/script a href='./default . aspx ' class=' boxy ' title=' prompt ' 3.2。加载文档并将其显示为提示信息/a 。

指向将弹出显示内容的文件的Href超链接。3.3.提交时，复制代码以确认框的形式弹出如下： Script Type=' text/JavaScript ' $(function(){ $(')。boxy’)。boxy()；});/script form class=' boxy ' action=' default . html ' method=' post ' input id=' submit 1 ' type=' submit ' value=' 3.3，提交时显示弹出层'/form 。

描述：1。boxy对话框会自动计算自身在您的内容区域中的大小和位置，因此无需指定包装集的大小；2.在上述简单的使用方法中，间接指定了boxy中消息属性的内容，即弹出框的显示信息。默认值为：“请确认：”3。每个匹配的锚点标题属性将被用作其对应对话框4的标题。消息内容的显示属性将设置为block(显示为block)以下载此示例。