Lee html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog 1.0
作者:十字花匠 2008.8.16收集整理由:Ajax中国
弹出层的html如下: <div id="floatBoxBg"></div>
html" title=class>class="tags" href="/tags/CSS.html" title=css>css默认样式如下:
<div id="floatBox" html" title=class>class="floatBox">
<div html" title=class>class="title"><h4>标题</h4><span>关闭</span></div>
<div html" title=class>class="content">内容</div>
</div>#floatBoxBg{width:100%;height:100%;background:#000;filter:alpha(opacity=50);opacity:0.5;position:absolute;top:0;left:0;}
.floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40%;}
.floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;}
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}
.floatBox .title span{float:right;cursor:pointer;}
.floatBox .content{padding:20px 15px;background:#fff;}
参数:
顺序 | 参数 | 功能 | 备注 | |
---|---|---|---|---|
1 | title | 弹出层的标题 | 必填,纯文本 | |
2 | content | 弹出层的内容 | :url | get或post某一页面里的html,该页面要求只包含body的子标签 |
:text | 直接写入内容 | |||
:id | 显示页面里某id的子标签 | |||
:html" title=class>class="tags" href="/tags/IFRAME.html" title=iframe>iframe | 层内内容以框架显示 | |||
3 | width | 弹出层的宽 | 必填,html" title=class>class="tags" href="/tags/CSS.html" title=css>css值,比如“200px” | |
4 | height | 弹出层的高 | 如上,但是可用“auto” | |
5 | html" title=class>class="tags" href="/tags/CSS.html" title=css>cssName | 弹出层的html" title=class>class="tags" href="/tags/CSS.html" title=css>css | 给id floatBox加入的样式名,层内样式可以通过这个样式名来定制 |
相关下载:
下载最新版本jQuery
下载Lee html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog插件
下载默认html" title=class>class="tags" href="/tags/CSS.html" title=css>css,应用时自行修改
应用:
html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog(title,content,width,height,html" title=class>class="tags" href="/tags/CSS.html" title=css>cssName);
演示:
- post提交表单返回信息$("#form1").submit(function(){
var str=escape($("#str").val());
html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog("我的标题","url:post?test.asp?str="+str+"","200px","auto","from");
return false;
}); get加载一个.html文件(也可以是.php/.asp?id=4之类的) html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog("我的标题","test.html","200px","auto","text"); 试试 - 弹出纯文本内容 html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog("我的标题","text:我的内容","200px","auto","text"); 试试
- 弹出某id里面的html页面有<div id="testID" style="display:none;"><h2>Lee html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog</h2></div>
html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog("我的标题","id:testID","300px","auto","id"); 试试 - 加载一个页面以框架示 把blueidea加载进来,定义html" title=class>class="tags" href="/tags/CSS.html" title=css>css:body .html" title=class>class="tags" href="/tags/IFRAME.html" title=iframe>iframe .content{padding:0;}复盖一下,因为.content默认padding:20px;
html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog("blueidea","html" title=class>class="tags" href="/tags/IFRAME.html" title=iframe>iframe:http://www.blueidea.com","500px","500px","html" title=class>class="tags" href="/tags/IFRAME.html" title=iframe>iframe"); 试试