`
star65225692
  • 浏览: 272893 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类

JS仿新浪微博弹出层:兼容常见浏览器的透明背景圆角弹出层

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容的背景透明圆角弹出层DIV+CSS+TABLE</title>
<link href="http://www.websjy.com/club/websjy_index/54/images/websjy.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.websjy.com/club/websjy_index/54/images/websjy.js"></script>
</head>

<body>
<div class="open"><span onclick="openShutManager(this,'box',false,'点击这里,关闭层','点击这里,弹出层')">点击这里,弹出层</span>
<div class="odiv" id="box" style="display:none"><table border="0" cellpadding="0" cellspacing="0">
  <tr><td class="lt"></td><td class="t"></td><td class="rt"></td></tr><tr><td class="l"></td><td class="box">
        <h3 class="tit"><b>这里是标题</b><a class="cls" href="javascript:;" onclick="openShutManager(this,'box',false)" title="关闭">关闭</a></h3>
        <div class="nr"> 提示:<br />墙头草

          1、在代码状态下使用[html][/html]可以贴“代码运行”的代码。并禁用发帖左侧的 URL 识别和标签解析<br />
          2、技术版面请勿灌水。特别受欢迎的主题可以顶一顶,但是请接受版主的定期“擦水”,这是为了减少技术讨论区出现的无效信息。<br />
          3、如需要收藏主题,请使用主题右上角的链接,还可以推荐给论坛里的朋友。<br />
          4、如果代码无法运行,您可以打开<a href="http://www.websjy.com/bbs/html.html" target="_blank">浏览页面</a>,将代码粘贴到运行框中运行。<br />
          <b>此方法简单,自适应内容高宽,易方便改风格。原创:设计源:<a href="http://www.websjy.com" target="_blank">http://www.websjy.com</a></b>
          </div>
          </td><td class="r"></td></tr><tr><td class="lb"></td><td class="b"></td><td class="rb"></td></tr></table><s><i></i></s>
          </div>
</div>
</body>
</html>
分享到:
评论
1 楼 afeiship 2011-10-10  
浪费感情!

相关推荐

    微博弹出层

    微博弹出层是一种常见的网页交互设计,主要用于展示重要的信息或者进行特定操作的确认,比如广告、通知、登录窗口等。这种设计通常会以一个半透明的遮罩层覆盖整个页面,然后在合适的位置显示弹出的内容,使得用户能...

    兼容所有浏览器的弹出层登录

    在IT行业中,网页开发是一项关键任务,而创建一个兼容所有浏览器的登录弹出层是确保用户体验一致性和流畅性的重要步骤。本文将详细讲解如何实现这样一个功能,并分享一个模仿Win7风格的弹出层实例。 首先,我们需要...

    自定义圆角对话框 类似于新浪微博长按弹出对话框

    本文将详细讲解如何实现一个自定义的圆角对话框,类似新浪微博长按后弹出的功能。 首先,我们需要创建一个新的布局文件,这个布局文件将会作为对话框的内容视图。在`res/layout`目录下创建`custom_dialog.xml`,在...

    超漂亮的仿腾讯弹出层效果(兼容主流浏览器).zip

    "超漂亮的仿腾讯弹出层效果(兼容主流浏览器)"这个项目旨在提供一个美观且实用的弹出层解决方案,它不仅注重视觉吸引力,同时也确保在各种主流浏览器上的良好兼容性。这样的设计对于提升网站互动性和用户体验有着...

    MySinaWeibo-仿新浪微博登陆界面

    【MySinaWeibo-仿新浪微博登陆界面】是一款基于Android平台的应用程序,旨在提供与新浪微博登录界面相似的用户体验。此项目主要关注用户界面(UI)的设计和实现,以确保其在视觉效果和交互性上与微博平台保持一致。...

    Android仿新浪微博客户端源代码

    5. **用户登录授权**:仿微博客户端需要实现OAuth2.0授权流程,用户登录后获取到Access Token,以便后续的API调用。这涉及到了OAuth2.0的原理和Android的意图(Intent)机制。 6. **动态加载与刷新**:在滚动列表时,...

    圆角兼容所有浏览器方法

    ### 圆角兼容所有浏览器的方法 #### 一、引言 在网页设计中,圆角是一种常见的视觉效果,能够使页面看起来更加柔和美观。然而,不同的浏览器对于圆角的支持程度存在差异,这使得开发者需要采取一定的策略来确保...

    弹出层,可拖动,仿discuz2.x 登陆弹出

    总结来说,“弹出层,可拖动,仿discuz2.x 登录弹出”的实现涉及到了JavaScript交互、CSS布局和样式设计,以及浏览器兼容性的处理。通过这些技术,可以创建出既美观又实用的弹出层,提升用户的使用体验。在实际开发...

    高仿新浪微博弹框菜单

    在Android开发中,"高仿新浪微博弹框菜单"是一个常见的用户界面组件,它提供了一种类似于新浪微博应用中的交互式弹出菜单。这种菜单通常在用户点击某个按钮或执行特定操作时从屏幕边缘滑出,展示一系列可选的操作或...

    弹出层,仿网易登陆弹出。

    在本例中,我们将讨论一个仿网易登录弹出层的设计实现,它具备一系列高级特性,包括可拖动、窗口居中、自定义大小、背景变暗以及半透明边框。 首先,让我们深入理解这些特性: 1. **可拖动功能**:这个特性允许...

    圆角弹出层

    "圆角弹出层"是一种常见的用户界面设计元素,它在网页或应用程序中起到提示、显示额外信息或交互操作的作用。通常,这类弹出层会带有明显的圆角,以提供更加美观和友好的视觉体验。在本文中,我们将深入探讨圆角弹出...

    jquery弹出层 jquery弹出层 jquery弹出层

    5. **阻止背景交互**:为了让用户专注于弹出层,可以设置背景半透明,或者禁止背景交互。这可以通过CSS的`pointer-events`属性实现,或者通过JavaScript来禁用背景元素的点击事件。 6. **响应式设计**:为了确保在...

    超漂亮的仿腾讯弹出层效果

    在网页设计中,弹出层(也称为模态窗口或对话框)是一种常见的交互元素,用于显示临时信息、用户确认、表单输入等。腾讯作为中国互联网巨头,其产品界面设计一直以美观、易用著称,弹出层效果也不例外。本教程将详细...

    兼容各种浏览器的圆角边框

    通过学习和分析这些文件,你可以更好地理解如何在实际项目中处理浏览器兼容性问题,确保你的网页在各种环境下都能呈现出理想的圆角边框效果。 总的来说,理解和掌握圆角边框的兼容性处理是每个前端开发者必备的技能...

    js换肤圆角代码兼容各个浏览器

    在网页设计中,实现元素的圆角效果以及动态换肤是常见的需求,尤其在JavaScript(JS)的帮助下,这些功能可以轻松地实现,并且能够确保在不同的浏览器之间具有良好的兼容性。"js换肤圆角代码兼容各个浏览器"这个主题...

    兼容所有浏览器的 Jquery 圆角插件,可配置

    总的来说,这个兼容所有浏览器的jQuery圆角插件是前端开发者实现跨浏览器圆角效果的一个实用工具。通过理解其使用方法和实现原理,开发者可以更灵活地在项目中应用,并根据需要进行定制和优化。

    弹出层封装_1

    在“弹出层封装_1”中,CSS3可能被用来实现弹出层的样式设计,包括但不限于边框圆角、阴影效果、背景渐变、多角度提示(可能通过变换属性如`transform: rotate()`实现)以及过渡动画,使弹出层更加动态和美观。...

    圆角兼容所有浏览器

    原始的圆角框 兼容所有浏览器 里面有html测试

    兼容各个浏览器的圆角插件

    在现代网页设计中,圆角已经成为了一种常见的视觉元素,为网页界面增添了一份柔和与现代感。然而,由于不同浏览器对CSS3特性的支持程度不一,实现跨浏览器的圆角效果在过去一直是个挑战。"兼容各个浏览器的圆角插件...

    兼容所有浏览器的CSS3圆角

    本主题将详细探讨如何实现“兼容所有浏览器的CSS3圆角”这一技术目标。 首先,CSS3中的`border-radius`属性是实现圆角的关键。它允许我们为元素的四个角分别设置不同的圆角半径,从而创造出各种形状的圆角效果。...

Global site tag (gtag.js) - Google Analytics