HTML 和 CSS 弹出卡

Question

我正在使用 Electron 创建一个 Web 浏览器，我需要帮助创建一个弹出卡。我到处寻找类似的东西，但我找不到任何东西。

我需要创建类似于所提供图像的弹出窗口。类似于 chrome 扩展弹出框（最好是 chrome 连接弹出框），这些将用于创建连接弹出框、扩展弹出框等。

Chrome 连接弹出窗口

Visual Studio 代码编辑器弹出窗口

Chrome Extension popup

Answer 1

您必须创建一个模式弹出窗口。这可以是默认隐藏的 div，但当您单击或悬停在另一个元素上时会显示。

它需要有absolute 定位，您需要根据event 属性clientY 和clientX 分别更新top 和left 样式属性。

const modalTooltip = document.querySelector('#modal-tooltip');

const showModal = ({ clientX, clientY }) => {
  Object.assign(modalTooltip.style, { top: `${clientY}px`, left: `${clientX}px` });
  modalTooltip.classList.add('tooltip-visible');
};

const hideModal = () => {
  modalTooltip.classList.remove('tooltip-visible');
};

document.querySelector('.site-info').addEventListener('click', showModal);
modalTooltip.querySelector('.tooltip-close').addEventListener('click', hideModal);

body {
  background: #222;
  color: #DDD;
}

.demo {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.demo-help {
  font-weight: bold;
  margin-left: 1em;
}

.site-info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  background: #666;
  border: thin solid #555;
  border-radius: 50%;
}

.site-info {
  color: #DDD;
  cursor: pointer;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  background: #4E4C46;
  color: #EEE;
  border: thin solid #222;
  border-radius: 0.2em;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
  font-family: 'Roboto', sans-serif;
  font-size: smaller;
}

.tooltip.tooltip-visible {
  display: flex;
}

.tooltip-header {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5em;
  align-items: top;
}

.tooltip-close {
  cursor: pointer;
}

.tooltip-close:hover {
  color: #FFF;
}

.tooltip-top, .tooltip-bottom {
  display: flex;
  flex-direction: column;
  padding: 0.5em;
}

.tooltip-top {
  flex: 1;
}

.tooltip-bottom {
  border-top: thin solid #999896;
}

.tooltip-title {
  color: #86CB81;
  font-size: 1.25em;
  flex: 1;
}

.tooltip-content {
  flex: 1;
}

.tooltip a,
.tooltip a:active,
.tooltip a:hover {
  color: #9CAB83;
}

.tooltip-options {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 0.667em;
}

.tooltip-options .fas {
  color: #70706f;
  margin-right: 0.5em;
  width: 1.5em;
  text-align: center;
}

.tooltip-option-flag {
  color: #999896;
}

#modal-tooltip {
  width: 240px;
  height: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
<div class="demo">
  <div class="site-info">
    <i class="fas fa-lock"></i>
  </div>
  <div class="demo-help">&larr; Click Me!</div>
</div>

<div class="tooltip" id="modal-tooltip">
  <div class="tooltip-top">
    <div class="tooltip-header">
      <div class="tooltip-title">Connection is secure</div>
      <div class="fas fa-times tooltip-close"></div>
    </div>
    <div class="tooltip-content">
      Your information (for example, passwords or credit card numbers) is private when it is sent to this site. <a href="#">Learn more</a>
    </div>
  </div>
  <div class="tooltip-bottom">
    <div class="tooltip-options">
    <div>
      <i class="fas fa-file-invoice"></i>
      Certificate
      <span class="tooltip-option-flag">(Valid)</span>
    </div>
    <div>
      <i class="fas fa-palette" aria-hidden="true"></i>
      Cookies
      <span class="tooltip-option-flag">(16 in use)</span>
    </div>
    <div>
      <i class="fas fa-cog" aria-hidden="true"></i>
      Site settings
    </div>
  </div>
</div>

Answer 2

这是 POP UP CARD 的示例代码

---

测试片段代码

---

1. 将 HTML 代码另存为 index.html
2. 将 CSS 代码保存为 style.css

注意-CSS 文件名应与您在 html 中使用的匹配*

*即link rel="stylesheet" href="style.css"

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;
  min-height: 100vh;
}
a,
a:link {
  font-family: inherit;
  text-decoration: none;
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.container:target {
  display: flex;
}
.modal {
  width: 60rem;
  padding: 4rem 2rem;
  border-radius: .8rem;
  color: hsl(0, 0%, 100%);
  background: linear-gradient(to right bottom, #009FFF, #ec2F4B);
  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
  position: relative;
  overflow: hidden;
}
.details {
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid hsla(0, 0%, 100%, .4);
}
.title {
  font-size: 3.2rem;
}
.description {
  margin-top: 2rem;
  font-size: 1.6rem;
  font-style: italic;
}
.txt {
  padding: 0 4rem;
  margin-bottom: 4rem;
  font-size: 1.6rem;
  line-height: 2;
}
.txt::before {
  content: '';
  position: absolute;
  top: 0%;
  left: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 18rem;
  height: 18rem;
  border: 1px solid hsla(0, 0%, 100%, .2);
  border-radius: 100rem;
  pointer-events: none;
}
.btn {
  padding: 1rem 1.6rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;
  color: inherit;
  background: transparent;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: .2rem;
  transition: .2s;
  cursor: pointer;
}
.btn:hover,
.btn:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
}
.link-1 {
  font-size: 1.8rem;
  color: hsl(0, 0%, 100%);
  background: linear-gradient(to right bottom, #009FFF, #ec2F4B);
  box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);
  border-radius: 100rem;
  padding: 1.4rem 3.2rem;
  transition: .2s;
}
.link-1:hover,
.link-1:focus {
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
  box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);
}
.link-2 {
  width: 4rem;
  height: 4rem;
  border: 1px solid hsla(0, 0%, 100%, .4);
  border-radius: 100rem;
  color: inherit;
  font-size: 2.2rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: .2s;
}
.link-2::before {
  content: '×';
  -webkit-transform: translateY(-.1rem);
          transform: translateY(-.1rem);
}
.link-2:hover,
.link-2:focus {
  border-color: hsla(0, 0%, 100%, .6);
  -webkit-transform: translateY(-.2rem);
          transform: translateY(-.2rem);
}


----------

<!DOCTYPE html>
<!--code by alok shukla-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>pop up card</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
</head>
<body>
 
 <a href="#modal-opened" class="link-1" id="modal-closed">open pop up card</a>
 
<div class="container" id="modal-opened">
  <div class="modal">
 
    <div class="details">
      <h1 class="title">Your Title</h1>
      <p class="description">Slogan will be here at this place.</p>
    </div>
 
    <p class="txt">some xyz some xyz some xyz some xyz some xyz some xyz some xyz some xyz some xyz 
        some xyz some xyz some xyz some xyz some xyz some xyz some xyz </p>
 
    <button class="btn">Button &rarr;</button>
 
    <a href="#modal-closed" class="link-2"></a>
 
  </div>
</div>
 
</body>
</html>