现在的位置: 首页 > 综合 > 正文

Jquery弹出层插件,非常好用绚丽Lee dialog 1.0

2013年08月03日 ⁄ 综合 ⁄ 共 1593字 ⁄ 字号 评论关闭
文章目录

 

标题


弹出层的html如下:

 <div id="floatBoxBg"></div>
<div id="floatBox" class="floatBox">
<div class="title"><h4>标题</h4><span>关闭</span></div>
<div class="content">内容</div>
</div>

 css默认样式如下:#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的子标签
:iframe 层内内容以框架显示
3 width 弹出层的宽 必填,css值,比如“200px”
4 height 弹出层的高 如上,但是可用“auto”
5 cssName 弹出层的css 给id floatBox加入的样式名,层内样式可以通过这个样式名来定制

 

相关下载:

下载最新版本jQuery
下载Lee dialog插件
下载默认css,应用时自行修改

应用:

dialog(title,content,width,height,cssName);

演示:

  1. post提交表单返回信息$("#form1").submit(function(){
    var str=escape($("#str").val());
    dialog("我的标题","url:post?test.asp?str="+str+"","200px","auto","from");
    return false;
    });


    get加载一个.html文件(也可以是.php/.asp?id=4之类的) dialog("我的标题","test.html","200px","auto","text");试试

  2. 弹出纯文本内容 dialog("我的标题","text:我的内容","200px","auto","text");
    试试
  3. 弹出某id里面的html页面有<div id="testID" style="display:none;"><h2>Lee dialog</h2></div>
    dialog("我的标题","id:testID","300px","auto","id"); 试试

    Lee dialog

  4. 加载一个页面以框架示 把blueidea加载进来,定义css:body .iframe .content{padding:0;}复盖一下,因为.content默认padding:20px;
    dialog("blueidea","iframe:http://www.blueidea.com","500px","500px","iframe");
    试试

 

 原址 http://www.okajax.com/demo/dialog/

抱歉!评论已关闭.