使用 jQuery 在页面底部弹出 Cookie答案

【问题标题】：Cookie popup at bottom of the page using jQuery使用 jQuery 在页面底部弹出 Cookie
【发布时间】：2018-07-25 14:36:57
【问题描述】：

我是 jQuery 和 CSS 的新手。我需要显示一个类似于以下 url 的弹出窗口。

当我们第一次访问下面的url时，页面底部会弹出一个窗口。

我可以使用开发人员工具选项复制弹出的 div 内容，也可以复制整个 CSS 文件，但我无法复制该特定元素的 CSS 样式。

是否有任何可能的方法来复制该特定元素的 CSS 样式或任何可以创建具有类似样式的弹出窗口的参考 CSS。

www2.chubb.com/uk-en/brexit/

【问题讨论】：

使用 Google 解决您的“问题”。这是一个简单的网站，可以在 Google 中找到。 cookieconsent.insites.com
我们不是代码编写服务。
@james Douglas - 我知道
@Dennis - 感谢分享参考链接。

标签： javascript jquery html css jquery-ui

【解决方案1】：

我不确定你是否尝试过复制元素的 CSS 代码，但如果你这样做了，我认为它应该可以简单地工作，因为元素只需要使用 rgba(0,0,0,.8) 为 background 设置背景颜色属性。

位置，可以使用绝对位置或固定位置（视情况而定）。

.pop-up {
  height: 200px;
  background: rgba(0, 0, 0, 0.8);
  color: #FFF;
  padding: 15px;
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

.background {
  height: 400px;
  width: 500px;
  background: url('https://i.ytimg.com/vi/2XX5zDThC3U/maxresdefault.jpg') 100% 100%;
  position: relative;
}

<div class="background">
  <div class="pop-up">
    <p>The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
      laborum." Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC </p>
  </div>
</div>

【讨论】：