登录
当前位置： 首页 > 知识库问答 >
问题：

HTML和CSS弹出卡

宦砚
2023-03-14

我正在用电子创建一个网络浏览器，我需要帮助创建一个弹出卡。我到处寻找这样的东西，但我什么也找不到。

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

Chrome扩展弹出

共有2个答案

邹正阳
2023-03-14

测试代码段代码

  1. 将超文本标记语言代码保存为index.html
  2. 将CSS代码保存为style.css

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

*即链接rel="样式表"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>
公西修文
2023-03-14

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

它需要有绝对定位，并且您需要根据事件属性clientY和clientX分别更新顶部和左侧样式属性。

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>
 类似资料：
  • HTML 和 CSS 集成（HTML & CSS Integration）

    PyCharm Editor很好地支持HTML和CSS。 PyCharm Editor包含一个特殊的简写，并为HTML提供标签完成。 Emmet Emmet是PyCharm编辑器中使用的简写。 它包括各种功能，如缩写预览，自动URL识别和编辑点，用于HTML和CSS文件。设置部分的用户界面显示在下面给出的屏幕截图中 - 创建HTML和CSS文件 PyCharm包含一个用于创建HTML和CSS文件的

  • Pycharm HTML和CSS集成

    主要内容：Emmet,创建HTML和CSS文件,创建CSS文件PyCharm编辑器很好地支持HTML和CSS。 PyCharm编辑器包含一个特殊的简写，并为HTML提供标记完成。 Emmet Emmet是PyCharm编辑器中使用的速写。 它包括HTML和CSS文件的缩写预览，自动URL识别和编辑点等各种功能。设置部分的用户界面显示在下面的屏幕截图中 - 创建HTML和CSS文件 PyCharm包含一个用于创建HTML和CSS文件的内置功能。 创建新的HTM

  • 15.2 HTML和CSS相关

    HTML 相关 你是如何理解 HTML 语义化的？ 语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。 举例：段落用 p，边栏用 aside，主要内容用 main 标签。 好处： 便于开发者阅读和维护 有利于SEO：让浏览器的爬虫和辅助技术更好的解析， 语义化标签介绍： 在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但

  • Twitter Bootstrap弹出窗口中的HTML

    问题内容： 我正在尝试在自举弹出窗口中显示HTML，但不知为何它不起作用。我在这里找到了一些答案，但这对我不起作用。如果我做错了事，请告诉我。 问题答案： 您不能使用，因为它属于它，所以它不起作用，请更改它，这一切都很好。 这是正在工作的 JSFiddle ，它向您展示了如何创建引导弹出窗口。 代码的相关部分如下： HTML： JavaScript： 顺便说一句，您始终至少需要启用弹出窗口。但是您

  • 从菜单项触发模态卡，但所有模态卡弹出-HTML、CSS、JS

    我仍然无法正确地从导航栏项目中触发模式卡弹出窗口。我已经做了建议的更改，但是当我单击下拉菜单中的导航栏项目时，该div弹出的所有模式卡都会显示出来。 下拉列表中的每个导航栏项目都应链接到一个模式卡，单击该项目时，只有该卡会弹出。无论单击发生在何处，所有模式卡都会层叠出现。 数据目标引用已移动到导航栏项，但所有div modals都会弹出，即使在单击顶部导航栏时也是如此。尝试使用菜单项上的href并

  • HTML CSS

    主要内容：尝试一下 - 实例,如何使用CSS,内联样式,HTML样式实例 - 背景颜色,实例,HTML 样式实例 - 字体 字体颜色 ，字体大小,实例,HTML 样式实例 - 文本对齐方式,实例,内部样式表,外部样式表,HTML 样式标签,已弃用的标签和属性CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。 Look! Styles and colors Manipulate Text Colors,  Boxes and more... 尝试一下 » 尝

相关问答

CSS按钮在悬停期间不改变颜色（css和html）html - 如何使用CSS和HTML实现光圈阴影效果？JavaFX extract Calendar-从DatePicker弹出/仅显示弹出用CSS调整HTML表为什么我的html在父级之外弹出？[副本]

相关文章

从CSS插入HTMLCSS / HTML的页码使用CSS在HTML中模糊Img和DivjQuery Mobile弹出窗、弹出层知识汇总javascript 中的console.log和弹出窗口alert

相关阅读

Bootstrap 弹出框Bootstrap4 弹出框CSS宽度和高度精心整理HTML/CSS面试题（2022求职必看）jQuery Mobile 弹窗

相关工具

AlertView弹出动画htmlCSS TesterCSS PatcherCSS ToolTip

相关文档

李炎恢 HTML CSS JavaScript PHP Bootstrap 教程揭秘 CSSHTML 宝典HTML Canvas Deep DiveCSS 基础教程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.