`

jquery弹出层背景变暗 Lee dialog collect by Ajax

阅读更多
Lee dialog 1.0
http://www.okajax.com/demo/dialog/
Lee dialog 1.0作者:十字花匠 2008.8.16收集整理由:Ajax中国

标题关闭
内容
弹出层的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;}


参数:
顺序参数功能备注
1title弹出层的标题必填,纯文本
2content 弹出层的内容:url get或post某一页面里的html,该页面要求只包含body的子标签  :text 直接写入内容  :id 显示页面里某id的子标签   :iframe 层内内容以框架显示
3 width 弹出层的宽 必填,css值,比如“200px”
4 height 弹出层的高 如上,但是可用“auto”
5 cssName 弹出层的css给id floatBox加入的样式名,层内样式可以通过这个样式名来定制



应用:
dialog(title,content,width,height,cssName);

上传文件为实例
分享到:
评论

相关推荐

    jquery弹出层背景变暗 Lee dialog

    总结来说,"jQuery弹出层背景变暗 Lee dialog"是一个实用的JavaScript插件,它利用jQuery的便利性和CSS的灵活性,为网页添加了具有专业感的弹出对话框功能,同时通过背景变暗,使用户能更好地聚焦于弹出的内容。...

    jquery弹出层背景变暗

    "jQuery弹出层背景变暗"这个话题涉及到在使用jQuery时,如何创建一个具有半透明暗色背景的弹出层(也称为对话框或模态窗口),以突出显示弹出内容并降低页面其他部分的视觉干扰。 首先,我们需要理解jQuery弹出层的...

    模态框

    4. `jquery弹出层背景变暗 Lee dialog collect by Ajax中国 http--www_okajax_com.htm`:这个文件名暗示了一个可能包含jQuery弹出层实现的示例,其中可能包括了背景变暗效果,这种效果常用于突出显示模态框。...

    JQuery实现对话框效果 即弹出对话框背景变暗且不可操作

    本文将深入探讨如何使用jQuery实现一个对话框效果,即在弹出对话框时,背景变暗并且用户无法操作背景内容,以提供更好的用户体验。 首先,要实现这种效果,我们需要引入jQuery库到我们的HTML文件中。可以使用CDN...

    jquery dialog弹出层

    而jQuery UI则是在jQuery基础上扩展的一套交互式用户界面组件库,其中包括一个强大的对话框(Dialog)功能,即“jQuery dialog弹出层”。这个弹出层在网页应用中广泛用于创建模态或非模态警告、提示、确认或者更复杂...

    jquery弹出层不关闭 父页面刷新

    在IT领域,尤其是在Web开发中,"jquery弹出层不关闭 父页面刷新"是一个常见的交互需求。这里,我们主要讨论如何使用jQuery实现这样的功能,即在一个弹出层(通常是一个模态对话框)显示时,用户可以操作父页面而不会...

    jQuery弹出层 可移动层 提示框 浮动层

    jQuery,作为JavaScript库的杰出代表,提供了丰富的API和插件,使得创建可移动、可自定义的弹出层变得轻而易举。本文将深入探讨jQuery弹出层的实现原理,以及如何构建可移动的提示框和浮动层。 首先,我们来理解...

    jquery弹出层

    jQuery作为一款强大的JavaScript库,提供了丰富的API和插件,使得实现弹出层效果变得简单易行。本文将深入探讨jQuery弹出层的实现原理、常见应用场景以及如何通过代码实现这一功能。 首先,我们需要理解弹出层的...

    jQuery弹出层插件大全

    除此之外,还有其他一些jQuery弹出层插件值得一提,例如jQuery Modal Dialog和jQuery UI。jQuery Modal Dialog是一个独立的插件,提供错误提示、自动关闭、显示/隐藏、关闭按钮、对话框标题和宽度等特性。jQuery UI...

    JQuery弹出层类库

    为了简化这个过程,许多开发者选择使用预封装的jQuery弹出层插件,如`jQuery UI Dialog`、`Bootstrap Modal`或者本文提及的"3K大小的万能jQuery弹出层类库146"。这些插件提供了预设的样式和行为,只需几行代码就能...

    jquery弹出层框架方便简单

    《jQuery弹出层框架——便捷美观的dialogs实现》 在Web开发中,用户交互体验是至关重要的一个环节,其中弹出层(popup layer)作为常见的一种交互方式,被广泛应用于消息提示、表单填写、信息展示等场景。jQuery库...

    jQuery弹出层

    首先,jQuery库简化了JavaScript的操作,使创建弹出层变得更为简单。jQuery Popup,即基于jQuery的弹出层插件,能够帮助开发者快速实现各种类型的弹出效果,如模态对话框、提示框和下拉菜单等。 ### 1. 基本概念 -...

    jquery弹出层需要的js

    4. **插件应用**:jQuery有许多优秀的插件,如`bootstrap-modal`、`jquery-ui-dialog`等,它们提供了预设样式和功能的弹出层,可以快速集成到项目中。虽然题目中没有提及这些插件,但了解它们的存在和用途对提升开发...

    jQuery Dialog 弹出层对话框插件(可加载url地址)

    **jQuery Dialog弹出层对话框插件:深入解析与应用** jQuery Dialog是jQuery UI库中的一个组件,它提供了一种优雅的方式在网页上创建交互式的弹出层对话框。这个插件不仅允许用户展示信息,还可以加载外部URL内容,...

    jQuery弹出层/jQuery弹出窗口/_全集

    "jQuery弹出层/jQuery弹出窗口/_全集"这个资源集合显然是一个包含多种jQuery弹出层和弹出窗口实现的综合教程或代码库。这些弹出效果通常用于显示通知、对话框、模态窗口、下拉菜单等多种用途,是网站用户交互的重要...

    jQuery弹出层插件三种简单遮罩弹出框效果

    遮罩弹出框则在此基础上添加了一个半透明的背景层(通常称为“遮罩”),这不仅能够聚焦用户的注意力,还能提供更好的用户体验,避免用户在弹出框显示时误触页面其他元素。 1. **基本遮罩弹出框** 最基础的遮罩弹...

    jquery 弹出层,点击链接弹出,不支持框架

    首先,让我们了解jQuery弹出层的基本概念。弹出层通常指的是在用户与页面交互时,如点击按钮或链接,会在当前页面上弹出一个浮动窗口,显示额外的信息或功能。这种效果可以用来展示详细信息、表单、图片等,而不会...

    jquery弹出层带关闭按钮

    "jquery弹出层带关闭按钮"这个主题涉及到的是使用jQuery来创建具有关闭功能的弹出窗口,这在网页交互设计中是非常常见的需求。下面将详细解释如何实现这一功能。 首先,我们需要理解什么是弹出层(Popup Layer)。...

    一些简单的弹框、弹出层插件、jquery.dialogBox

    "一些简单的弹框、弹出层插件、jquery.dialogBox"这个主题聚焦于利用JavaScript库jQuery来实现这些功能。jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,极大地提高了...

    jQuery弹出层播放视频

    在“jQuery弹出层播放视频”的场景下,通常会结合使用弹出层插件,例如jQuery UI的Dialog或者Bootstrap的Modal。这些弹出层组件可以将视频嵌入其中,当用户点击某个按钮或链接时,弹出层会出现并显示视频。这样既不...

Global site tag (gtag.js) - Google Analytics