(转)Lee dialog (Jquery 浮动)

news/2024/7/4 1:43:02 标签: dialog, jquery, iframe, css, class, html
html" title=class>class="baidu_pl">
html" title=class>class="article_content clearfix">
html" title=class>class="htmledit_views">

 

Lee html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog 1.0

作者:十字花匠 2008.8.16收集整理由:Ajax中国

html" title=class>class="floatBox">
html" title=class>class="title">

标题

关闭
html" title=class>class="content"> 内容

弹出层的html如下: <div id="floatBoxBg"></div>
<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>
html" title=class>class="tags" href="/tags/CSS.html" title=css>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;}

参数:

顺序参数功能备注
1title弹出层的标题必填,纯文本
2content弹出层的内容:urlget或post某一页面里的html,该页面要求只包含body的子标签
:text直接写入内容
:id显示页面里某id的子标签
:html" title=class>class="tags" href="/tags/IFRAME.html" title=iframe>iframe层内内容以框架显示
3width弹出层的宽必填,html" title=class>class="tags" href="/tags/CSS.html" title=css>css值,比如“200px”
4height弹出层的高如上,但是可用“auto”
5html" 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);

演示:

  1. 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"); 试试
  2. 弹出纯文本内容 html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog("我的标题","text:我的内容","200px","auto","text"); 试试
  3. 弹出某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"); 试试

    Lee html" title=class>class="tags" href="/tags/DIALOG.html" title=dialog>dialog

  4. 加载一个页面以框架示 把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"); 试试

http://www.niftyadmin.cn/n/1052859.html

相关文章

MVC自动加载实现

自动加载 总结&#xff1a; 控制器类&#xff08;可增加&#xff09; 模型类&#xff08;可增加&#xff09; 框架核心类&#xff08;确定的&#xff09; 对于所有的类&#xff0c;分成两方面考虑&#xff1a; 一&#xff1a;可以确定的类。&#xff08;当自动加载方法确定时&a…

罗森伯格成功布线五星蕴海建国饭店

罗森伯格成功布线五星蕴海建国饭店 蕴海建国饭店作为平顶山市首家按五星级标准建设的园林式酒店&#xff0c;位于平顶山市新城区中心位置&#xff0c;毗邻白龟湖畔&#xff0c;座落在优美的湖光山色之间。该酒店占地面积120亩&#xff0c;由五栋独立的建筑组成&#xff0c;融欧…

递归遍历CtreeCtrl的方法

需要完成功能&#xff1a;根据用户的选择来安排几画面显示。 遍历&#xff1a;用递归来完成。 状态检验&#xff1a;GetCheck() 1.首先定义递归函数&#xff0c;对每个叶结点进行检验&#xff0c;若被选中&#xff0c;则记录变量自加&#xff11;. ?1234567891011121314151617…

jQuery入门简介

seektanjQuery是最近比较火的一个JavaScript库&#xff0c;从del.icio.us/上相关的收藏可见一斑。 到目前为之jQuery已经发布到1.2.1版本&#xff0c;而在这之前他们刚发布1.2版本&#xff0c;看看他的各个版本的 发布时间 &#xff0c;不难发现他的飞速发展&#xff0c;每个…

好好学一遍JavaScript 笔记(二)

/** * encodeURI跟encodeURIComponent的区别在于encodeURI不对 * 特殊字符进行编码如&#xff1a;冒号、前斜杠、问号和英镑符号. * 而encodeURIComponent则对它发现的所有非标准字符进行编码. */ var d "古道西风"; //这样的URL在后台转码获取过…

jmeter 获取总的线程数

String threads"${__BeanShell(ctx.getThreadGroup().getNumThreads())}"; vars.put("threads",threads); 转载于:https://www.cnblogs.com/linbo3168/p/11277423.html

12.伪类选择器与伪元素的应用

在之前的文章中我们已经了解过选择器的使用, 如果想对同一个元素在不同的状态时,展示不同的效果,则需要使用到今天要讲的伪类选择器 A. 伪类选择器: 是一个以冒号作为前缀,被添加到一个选择器的末尾的关键字; 依据使用的方式,可以分为如下三种类型: a. 状态类伪类选择器: :che…

jquery是什么技术

Jquery是继prototype之后又一个优秀的Javascrīpt框架。有人使用这样的一比喻来比较prototype和jquery&#xff1a;prototype就像Java&#xff0c;而jquery就像ruby.实际上我比较喜欢java&#xff08;少接触Ruby 罢了&#xff09;但是jquery的简单的实用的确有相当大的吸引力啊…