覆盖溢出:用 z-index 隐藏

2023-11-24

我正在使用 coda_bubble jquery 插件,我需要让我的气泡在溢出隐藏 div 中弹出。这是我的示例代码。

<html>
<head>
<title>Override overflow:hidden</title>
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script>
<script type="text/javascript">
$(function(){
   opts = {
      distances : [40,40],
      leftShifts : [0,0],
      bubbleTimes : [400,400],
      hideDelays : [0,0],
      bubbleWidths : [200,200],
      bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER",
      msieFix : true
   };
   $('.coda_bubble').codaBubble(opts);
});
</script> 
<style type="text/css">
body{
    margin:0;
    padding:0;
    }
#wrapper{
    width:300px;
    margin:200px auto;
    }
.overflow{
    width:120px;
    height:80px;
    overflow:hidden;
    float:left;
    }
.coda_bubble{
    z-index:100;/****NOT WORKING*******/
    }
</style>
</head>

<body>
<div id="wrapper">
    <div class="overflow">
       <div class="coda_bubble">
            <div>
                <p class="trigger">Trigger Bubble</p>
            </div>
            <div class="bubble_html">
               [BUBBLE CONTENT]
            </div>
        </div>
    </div>
    <div class="overflow" style="overflow: visible;">
       <div class="coda_bubble">
            <div>
                <p class="trigger">Trigger Bubble</p>
            </div>
            <div class="bubble_html">
               [BUBBLE CONTENT]
            </div>
        </div>
    </div>
</div>
</body>
</html>

我会计算距窗口的偏移位置,将其从其父窗口中删除并将其附加到主体上。

Eg:

var left, top;
left = jQuery(element).offset().left;
top = jQuery(element).offset().top;
jQuery(element)
  .appendTo('body')
  .css({
    'position': 'absolute',
    'left': left + 'px',
    'top': top + 'px'
  });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

覆盖溢出:用 z-index 隐藏 的相关文章

  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 如何将 HTML 转换为 Markdown?

    我有一个类似 stackoverflow 的网站 有一个文本区域 人们可以在其中写答案 我用这个 PHP 库 http parsedown org 转换降价 我的意思是我使用该函数来转换 italic to i italic i inclu
  • 古老的“字幕”标签的替代品?

    marquee 标签的标准等效项是什么 我正在寻找 HTML C asp NET 或 ASPX jquery java 脚本的解决方案 marquee 标签未包含在标准中 因为它是 视觉 标签 而不是 语义 标签 因此 您想要的任何语言都没
  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地
  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • Sass:@use 出错,未定义变量

    我正在使用 Sass 并且想要使用 use关键字而不是 import 因为 import有很多问题 另外只有dart sass支持这个功能 我将node sass改为dart sass 然而 问题出现了 我原来的代码 import carb
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • HTML W3C 有效元素 - DIV 在 TD 内有效吗?

    我正在和一位同事争论 但找不到证据证明我们俩都是对的 我之前已经看过给定标签的有效元素列表 但只是无法再次找到它 有人能指出我正确的方向吗 我对 XHTML 很好奇 但分歧具体在于 DIV 标签在 HTML 4 01 中的 TD 标签内是否
  • 如何使用 Scrapy 从网站获取所有纯文本?

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何停止TinyMCE删除span标签?

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • Webpack 4:如何使用 LESS 获取 CSS 源映射?

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

随机推荐

  • 如何通过Fiddler捕获Visual Studio Code流量?

    如何通过Fiddler抓取VS Code流量 我运行了我的 Fiddler 看起来工作正常 它可以捕获浏览器的流量 但不能捕获 VS Code 的流量 如果有人能给我解决方案 我真的很感激 Thanks 假设您正在使用一些 REST 客户端
  • 使用 typescript 创建猫鼬模型 - 子文档

    我正在使用打字稿实现猫鼬模型 如本文所述 https github com Appsilon styleguide wiki mongoose typescript models并且不确定当您使用子文档数组时这会如何翻译 假设我有以下模型和
  • 如何检查存储过程是否存在?

    我在网上搜索了一下 发现了一个post它使用以下代码片段来检查存储过程是否存在 select from USER SOURCE where type PROCEDURE and name my stored procedure 还有其他方法
  • Django,使用 ModelForm 更新用户配置文件

    我正在尝试为用户的个人资料显示一个简单的 ModelForm 并允许用户更新它 这里的问题是我的逻辑存在某种缺陷 在成功调用 form save 后 旧值显示在页面上 直到刷新才会显示适当的值 这里有什么问题吗 login required
  • 如何使用 Swift 4 在 UICollection 视图中进行多项选择

    我是 swift 的新手 从头开始构建 iOS 应用程序 使用 swift 4 想要执行如下操作 1 在UICollectionView中实现多单元格选择 2 将选定的单元格数据传递到服务器 请任何人都可以帮助我 该怎么做 告诉我执行此操作
  • 如何在 Windows 上获取硬件 MAC 地址

    我正在尝试从 NIC 检索 MAC 地址 有多种方法可以获取它 本文介绍了最常见的方法 http www codeguru com Cpp I N network networkinformation article php c5451 我
  • 单击传单标记即可转到 URL

    在 R 的传单包中 有没有办法单击标记并定向到 URL 这是JS解决方案 在 R 中 添加带有 URL 的弹出窗口 library leaflet content lt paste sep br b a href http www samu
  • 如何在 mac os x yosemite (10.10) 上安装 mcrypt 扩展

    我已将 Mac OS X 更新到 Yosemite 但这样做会覆盖我的所有开发环境 所以现在 要在本地 apache 上运行 Laravel 4 我需要安装 Mcrypt 扩展 但我尝试的一切都失败了 即使是在 OS X Mavericks
  • Android 蓝牙 VS 低功耗蓝牙

    我正在尝试创建一个应用程序 只要智能手机正在运行 就需要交换少量数据 只是为了通知设备足够接近 据我了解 传统的蓝牙会消耗大量电池 因此打开几个小时是不可行的 我正在考虑 BLE 但仍然担心电池容量 Q0 是否可以在手机运行时就开启BLE
  • JQuery DatePicker 背景颜色

    我正在使用 JQuery DatePicker 的示例链接文本 在我的 asp net 页面上 但是 日期选择器的背景颜色是白色 我不知道如何改变这个 更改为默认颜色 我的asp net页面背景页面是白色的 可能是这个原因 任何帮助将不胜感
  • 如何在模板中迭代 Django CHOICES - 不使用表单或模型实例

    我目前使用选项来定义月份列表和星期几列表 我想在我的模板中显示这些选择列表 而不必与特定实例或表单相关 例如 在我的模型中 MONTH CHOICES 01 January 02 February 03 March etc DAY CHOI
  • file_get_contents() 与使用 http/1.1 的上下文显着降低下载速度

    使用每个图像下载下面的代码 file get contents 平均需要 8 15 秒 如果我不在 file get contents 上使用上下文 则图像下载时间不到一秒 如果我将 opts 更改为 下面 我将获得与 file get c
  • 如何 - 单个 MongoDB 上的多个 Meteor 应用程序 - 相同的集合?

    以前有人问过这样的问题 如何在 Meteor 应用程序之间共享 MongoDB 集合 然而 答案并不清楚 我需要将 Meteor 公共应用程序和管理应用程序分开 出于多种原因 但主要是安全性和代码管理 使用接受的答案 export MONG
  • 有没有办法将进程的当前WorkingSet扩展到1GB? [复制]

    这个问题在这里已经有答案了 可能的重复 在C 中 有没有办法强制进程的WorkingSet为1GB 我们希望提前将 NET 进程的工作集增加到 1GB 以避免页面错误 有没有办法在 NET 中做到这一点 Update 不幸的是 即使我们打电
  • 如何删除babel添加的全局“use strict”

    我正在使用 use strict 的函数形式 并且不想要 Babel 在转译后添加的全局形式 问题是我正在使用一些不使用 use strict 模式的库 并且在连接脚本后可能会抛出错误 正如 Babel 6 中已经提到的 它是transfo
  • 如何在 Kubernetes 中设置自定义 HTTP 错误

    我想创建一个自定义 403 错误页面 目前我已经创建了一个 Ingress 并且在注释中我有这样的内容 nginx ingress kubernetes io whitelist source range 100 01 128 0 20 8
  • 带有缺失值的 dplyr 交叉表

    我想在 R 中使用dplyr 我有充分的理由不只使用底座table 命令 table mtcars cyl mtcars gear 3 4 5 4 1 8 2 6 2 4 1 8 12 0 2 library dplyr library t
  • 禁用其他网站的 iframe 嵌入

    我想禁用从我的网站到其他网站的 iframe 嵌入页面 我做了这个js 脚本有效 但我有 page01 php 和 page02 php 我想在 page01 php 源代码中插入 page02 php 的 iframe 当我这样做时 我被
  • 使用嵌套自定义对象进行 NSCoding?

    我有一系列嵌套对象 我需要将它们通过 NSCoding 协议 以便我可以将顶级对象保存到 NSUserDefaults 中 这是对象的结构 导师 班 NSMutableArray 保存 的实例 类 类 NSMutableArray 保存 的
  • 覆盖溢出:用 z-index 隐藏

    我正在使用 coda bubble jquery 插件 我需要让我的气泡在溢出隐藏 div 中弹出 这是我的示例代码