个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在创建一个网页，它将有一个带有图像的 jQuery 弹出窗口，该图像将在网站加载时自动出现。我希望弹出窗口创建一个黑色透明覆盖层，(链接:) like this .创建该弹出窗口更容易。但是我无法对图像执行此操作。我希望弹出窗口出现在距页面左边框 30% 的位置。图像和黑色叠加层应在悬停时消失，并在用户移动鼠标时重新出现。我该怎么办？
Html代码如下:
<head>
script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<a class="cha" data-popup-open="popup-imonelle" href="#"></a>
<div class="cha-popup" data-popup="popup-imonelle">
<div class="popup-pic">
<img src="Images/imonelle.jpg"/>
<a class="popup-hover" data-popup-close="popup-imonelle" href="#">x</a>
</div>
</div>
</body>
<footer>
<script src="js/Sciptquery.js"></script>
</footer>
还有 jQuery:
$(function() {
//----- OPEN when page loads
$(function(e) {
var targeted_popup_class = $('[cha-popup-close]').attr('cha-popup-close');
$('[cha-popup="' + targeted_popup_class + '"]').fadeOut(350);
});
//----- CLOSE on hover
$('[cha-popup-close]').on('hover', function(e) {
var targeted_popup_class = jQuery(this).attr('cha-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
});
最后是 CSS 代码:
.cha-popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}
/* Inner */
.popup-pic {
max-width:845px;
width:90%;
padding:0px;
position:absolute;
top:50%;
left:30%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
}
/* Close on hover function */
.popup-hover {
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
}
}
}
我已经修改了用于帖子所附图片弹出窗口的代码。但显然有些地方不对劲。
最佳答案
除了一些简单的语法问题，这里的主要问题是您的选择器。让我们来看看其中的一些......
//[cha-popup-close]
var targeted_popup_class = $('[cha-popup-close]').attr('cha-popup-close');
//[cha-popup]
$('[cha-popup="' + targeted_popup_class + '"]').fadeOut(350);
//[data-popup]
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
[cha-popup-close] 等方括号内的选择器正在寻找 cha-popup-close 的属性。
如果您查看您的 HTML，您没有任何元素具有名为 cha-popup 或 cha-popup-close 的属性，因此基本上没有您的选择器实际上是在选择任何东西。
[data-popup] 选择器是唯一能实际找到任何东西的选择器，因为 are 元素带有 data-popup属性。
使用正确的选择器，我相信你所追求的是这样的:
$(document).ready(function() {
//Get popup to open and fade it in
var targeted_popup_class = $('[data-popup-open]').data('popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
//CLOSE on hover
$('[data-popup-close]').on('mouseover', function(e) {
//Get popup to close and hide it
var targeted_popup_class = $(this).data("popup-close");
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
});
});
除了修复您的选择器之外，我还稍微整理了您的代码，修复了您放置的额外大括号，最显着的是更改了您的 .on("hover") (这不起作用)到 .on("mouseover")
关于javascript - HTML 页面上带有图像(带有黑色透明覆盖的框)的 jQuery 弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41945534/
25
4
0
我想禁用我的 UIButton，所以我调用: button.enabled = FALSE; 然而，这会使按钮变得透明，我可以看到它下面的元素。我不介意它改变颜色，我只是不希望它是透明的。 我尝试在
一个常规的 NSButton 如果被禁用，它似乎是透明的。 图像显示了一个样式为“push”的按钮 但是，我想禁用没有透明度的按钮。 我试图以编程方式将 alphaValue 设置为 1.0 但似乎
我正在尝试将Memoji从iPhone/Mac转换为具有透明背景的一系列png，以便我可以创建一个 Sprite 表。当按下空格键时，我可以清楚地看到它具有透明背景，但是在运行 ffmpeg -i s
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像 我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
我想创建一个具有部分透明背景的 View (舞台、窗口)。我有一张包含 Alpha channel 的图像 我在JavaFx中使用了这种场景，我必须将场景填充设置为空，并将根节点背景颜色设置为透明。我
我想将 JDesktopPane 设置为透明，并允许我单击下面的内容(例如桌面图标等)。内部框架应保持不透明，并且能够像当前一样在屏幕周围重新定位。有什么想法吗？ package test1;
我知道我不是第一个提出此类问题的人，但我认为我的问题有点不同。 我在 MS Paint 上绘制了一个 png 图像，它是一个播放器，当我使用图形对象绘制图像时，我希望图像的背景是透明的。我尝试了一些带
我在 Mac 的 swift 项目中想使用单选按钮，但与我的背景颜色相同。如何将背景设置为不透明或更改背景颜色？ 最佳答案 我找到了解决此问题的方法。将单选按钮的文本设置为“”，将 rb 添加到水平堆
我无法将我的相对布局设置为透明。我尝试了很多不同的方法，从类中自定义 View ，添加 android:background="@android:color/transparent"等。它们要么像下图
在 Storyboard中，我创建了一个 ![UINavigationController] 及其 Root View Controller UIViewcontroller。在工具栏中，我有一个分段
我必须让我的导航栏透明，我试过这段代码: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIB
我注意到，如果我将 View 背景颜色设置为透明，则在 segue 过渡结束后背景颜色会变成黑色(我猜这是默认的“视口(viewport)”颜色)。 我可以改变吗？当然，我可以将颜色从透明更改为紫色，
嘿，有没有可能让滚动条“隐藏”，我不想使用 overflow-y: hidden就像背景:透明或类似的东西 最佳答案 Here您会找到有关如何仅使用 CSS 隐藏滚动条的说明。 在第二个example
默认情况下，背景显示为白色。是否可以通过任何方式将其背景颜色更改为透明..？ (function() { var cx = '005519348941191855053:d0uziw7c
我正在尝试添加一个在 div 的左右边缘具有透明度/淡出的嵌入框阴影。我设法添加了一个普通的嵌入框阴影，但我不知道如何为边缘添加透明度。我该怎么做？ 这是我正在努力实现的一个例子。 .contai
如何删除 周围的边框并使其背景透明？ 最佳答案 试试这个: border: none; border-color: transparent; 关于html - 透明、无边框的文本输入，我们在Stac
是否可以使 JButton 透明(包括边框)而不是文本？我扩展了 swing 的 JButton 并覆盖了它: @Override public void paint(Graphics g) {
众所周知，要使QWidget/QOpenGLWidget半透明/透明，只需: widget->setAttribute(Qt::WA_TranslucentBackground) 但是，由于 QWin
我想知道如何在 Ubuntu 中为所有应用程序制作透明 Gnome 终端，我知道我们可以为桌面制作透明终端，而不是为所有应用程序制作透明终端。我用谷歌搜索了很多，但找不到任何解决方案。谁能告诉我该怎么
我想让 SWT Canvas 的背景透明，以便可以看到它后面的其他小部件。 我尝试将 alpha 设置为 0 并用矩形填充 Canvas ，并且还使用选项 SWT.NO_BACKGROUND 无济于事
我是一名优秀的程序员,十分优秀！