当前位置: 首页 > news >正文

在弹出框内三个元素做水平显示

最终效果图要求是这样:

 js代码:

    // 显示弹出窗口
function showPopup(node) {var popup = document.createElement('div');popup.className = 'popup';var inputContainer1 = document.createElement('div');/*  inputContainer1.className = 'input-container1'; */var input1 = document.createElement('input');input1.className="input-container1"input1.type = 'text';input1.placeholder = '输入框1';inputContainer1.appendChild(input1);var inputContainer2 = document.createElement('div');/*  inputContainer2.className = 'input-container2'; */var input2 = document.createElement('input');input2.className="input-container2"input2.type = 'text';input2.placeholder = '输入框2';inputContainer2.appendChild(input2);var buttonContainer = document.createElement('div');/*  buttonContainer.className = 'button-container'; */var addButton = document.createElement('button');addButton.className="button-container"addButton.textContent = '添加';buttonContainer.appendChild(addButton);popup.appendChild(inputContainer1);popup.appendChild(inputContainer2);popup.appendChild(buttonContainer);// 设置弹出窗口的位置var rect = node.getBoundingClientRect();var distance = 50; // 设置距离节点的水平距离var verticalOffset = 10; // 设置垂直偏移量popup.style.left = rect.right + distance + 'px';popup.style.top = rect.bottom + verticalOffset + 'px';// 添加弹出窗口到页面container.appendChild(popup);
}

因为这个框里只有这三个元素,所以其实只要父元素加display:flex就好了,子元素不用管

.popup: 这是一个 CSS 类选择器,用于选择具有 class="popup" 的元素。在这里,它选择了一个具有 class 为 "popup" 的弹出窗口。

这里的父元素指的其实就是popup,而子元素就是js代码中的input-container1、input-container2、button-container。如果你想要这三个元素在同一个水平线上显示的话,就直接在父元素里操作就好。

想让弹出窗口中的元素在底部对齐,你可以使用 align-items 属性,并将其值设置为 flex-end

css:

.popup {position: absolute;background-color: #5b8cc7;width: 338px;height: 150px;padding: 10px;border: 1px solid #ccc;border-radius: 19px;display: flex;align-items:flex-end;bottom: 0;z-index: 10;opacity: 0.8;right: -10px;
}

如果css代码是这样

 #jsmind_container {width: 800px;height: 500px;border: solid 1px #ccc;background: #f4f4f4;position: relative;display: flex;
}
  1. #jsmind_container: 这是一个 CSS 选择器,用于选择具有 id="jsmind_container" 的元素。在这里,它选择了一个具有 id 为 "jsmind_container" 的容器。

如果.popup

  1. .popup: 这是一个 CSS 类选择器,用于选择具有 class="popup" 的元素。在这里,它选择了一个具有 class 为 "popup" 的弹出窗口。

http://www.lryc.cn/news/92690.html

相关文章:

  • 纠删码技术在vivo存储系统的演进【上篇】
  • 如何实现APP自动化测试?
  • ​​INNODB和MyISAM区别
  • 普中自动下载软件1.86下载程序失败案例
  • JavaScript HTML DOM
  • solr快速上手:配置IK中文分词器(七)
  • 【软件测试】接口测试工具APIpost
  • 第六章 假言:那么、就、则;才。
  • [干货] 如何解决慢SQL?详细分析和优化实践!
  • 数据库实验三 数据查询二
  • 论文笔记与实战:对比学习方法MOCO
  • 大数据Doris(三十八):Spark Load 导入Hive数据
  • 【Prometheus】mysqld_exporter采集+Grafana出图+AlertManager预警
  • softmax 函数
  • 【SpringMVC】拦截器和过滤器之间的区别
  • springboot第25集:实体类定义规则
  • 【python】—— python的基本介绍并附安装教程
  • 浏览器跨域请求
  • 什么,你还在用 momentJs 处理相对时间
  • 三维模型 工程图
  • 我用ChatGPT写2023高考语文作文(二):全国乙卷
  • java版本工程项目管理系统平台源码,助力工程企业实现数字化管理
  • 代码随想录第55天
  • 算法设计与分析(填空专题)
  • Ubuntu22.04 K8s1.27.2
  • 卡尔曼滤波与组合导航原理(十二)扩展卡尔曼滤波:EKF、二阶EKF、迭代EKF
  • 基于蒙特卡洛模拟法的电动汽车充电负荷研究(Matlab代码实现)
  • 自学黑客【网络安全】,一般人我劝你还是算了吧
  • 编程中的心理策略:如何从错误中学习并实现自我成长
  • Rocket面试(五)Rocketmq发生流量控制的情况有哪些?