css弹窗的高度自适应样式

于 2023-11-13 08:40:46 发布
阅读量254 收藏
点赞数
文章标签： css vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74608954/article/details/134369187
版权 
height: 75vh;overflow: auto;

<el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
  <el-form style="height: 75vh;overflow: auto;" ref="form" :model="form" :rules="rules" label-width="80px">
小星星o
关注
layui弹窗自适应变大_layui怎么调整弹框大小？
weixin_39789327的博客
12-18 6327
layui怎么调整弹框大小？下面本篇文章给大家介绍一下layui中调整layer弹出窗体大小的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。layer是一个备受青睐的web弹层组件，在默认状态下layer的宽高都自适应的，但当需要自定义宽度时，可以使用area: ['500px', '400px']进行设置。设置代码：layer.open({type: 2,area:["5...
根据内容自动调整弹出窗口大小的JS解决方案
WeekZero的专栏
08-25 2390
问题         在弹出创苦时，根据窗口的内容来自动调节窗口的大小，窗口如果已经和屏幕相等大小时则出现滚动条。 解决方案         在弹出的页面中添加一JS脚本方法win_onLoad()，在body的onload方法中引用win_onLoad()，在body中添加表，表的id取名为tbllist，窗口的大小就是这个table的大小在宽和高上分别加50。 部分代码如下： functio
根据弹窗高度和生成内容高度，动态显示滚动条（）
weixin_34376562的博客
12-15 378
JS: var screen_h = document.documentElement.clientHeight;var scroll_h =screen_h-100; //减去推送按钮所占固定高度 //是否显示所有滚动条function scroll(){ var heightList=$("tbody").height(); if(heightList>scroll_h){ $("...
Element UI 弹窗（Dialog）改成自适应高度，仅body内容部分滚动
热门推荐
大脑袋瓜子
04-16 4万+
定义样式如下： .abow_dialog { display: flex; justify-content: center; align-items: Center; overflow: hidden; .el-dialog { margin: 0 auto !important; height: 90%; ...
EasyUi Dialog 弹窗自动调整大小
xiaoxl084520的博客
12-26 8285
有的时候弹框需要根据浏览器大小变化来自适应大小，这样可以提供给用户很好的浏览体验 实现方式如下： //最小宽度及高度及显示的比例按照自己需要更改 function initDialogArea(obj,minWidth,minHeight) { if (obj != null) { var flag = $(obj).data(&amp;quot;flag&amp;quot;); if (fl...
关于layui的layer.open弹出层高度自适应的解决
yzw675628706的博客
03-31 1万+
在使用layui的layer插件打开弹出层的时候，会出现弹出层的Iframe高度设置为默认的150px，这样会导致出现滚动条或者内容显示不全的现象，在网上面也搜索了对应的解决方案。 **方案一：在弹窗的时候，设置area只规定宽度，不设置高度，让插件自适应，**如下： layui.layer.open({ type:2, //此处只规定宽度，不规定高度，让插件自适应高度 area:['300px'], content:'www.baidu.com', shade:0.5, title:'百度页面
WIN10 UI + layer弹窗 + 自适应布局
03-26
"WIN10 UI + layer弹窗 + 自适应布局"是一个项目，旨在复刻Windows 10的视觉风格，并结合layer弹窗技术和自适应布局，以适应不同设备的显示需求。 首先，让我们来了解一下Win10 UI的设计特点。Win10 UI强调简洁、...
vue+elementUI 实现内容区域高度自适应的示例
10-14
除了使用JavaScript动态绑定，我们还可以借助CSS3的`calc()`函数来实现高度自适应。`calc()`函数允许在CSS中执行简单的计算。在示例中，`.el-main`的CSS规则如下： ```css .el-main { height: calc(100vh - 70px);...
JS自动适应的图片弹窗实例
10-27
本文详细介绍了如何使用JavaScript编写一个图片弹窗实例，使弹窗中的图片能够根据浏览器窗口大小自动适应，并且能够等比例调整大小以适应设定的最大高度和宽度。 知识点一：等比例缩放原理 在实现图片弹窗自动适应...
layer弹出层自适应高度,垂直水平居中的实现
10-16
`layer` 是一个常用的 JavaScript 弹窗插件，它提供了丰富的功能，包括弹出层的自适应高度和垂直水平居中。本文将详细讲解如何利用 `layer` 实现这些效果。 首先，我们来关注高度自适应的问题。在 `layer` 中，当弹...
页面中最常用的弹框。自适应。适合移动端。
WEB_HW
01-12 1万+
我们经常会很头疼如何实现一个对象自然的居中。正好显示在窗口的中间部分。我也是刚刚好好研究了一份。才发现这其中的奥妙。顿时觉得豁然开朗。 前提1：我们讨论的是当弹框的宽度为百分比，高度根据内容自适应，条件下。（我想大家肯定是先想了解这种情况下的内容） 思路：其实我们要想实现居中的效果，无非最主要的就是获得弹框定位的左边。我们的弹框一般是相对定位。那么我们如何获得弹框的left和top值呢。那么我们
html弹窗位置,跟随弹窗位置的确定，以及位置自适应-获取dom元素的确定位置，智能显示跟随弹框...
weixin_35772723的博客
06-04 4477
我们在页面弹窗中，总会需要一些弹窗能够跟随DOM的位置出现，叫做“跟随弹窗”。而跟随弹窗最好的要求就是要能根据dom元素所在的位置自动调整跟随dom的方位，以便让弹框完整的显示在可视区中。由于这个实现需要比较麻烦的算法，我们通常的写法就是根据直接让弹窗的左上角对齐dom元素的左下角或者左上角。这样写出的弹窗适应性比较差。今天我们就来讲解一下让弹窗能自动调节跟随方位的算法问题。下面空间不足的时候，跟...
html自定义弹窗实现图片高度自适应
zuo-yiran的博客
06-06 3491
实际效果： 点击 实现 再次点击则弹窗消失。 弹窗布局为： &amp;lt;div class=&quot;box&quot;&amp;gt; &amp;lt;img class=&quot;img&quot; id=&quot;img&quot; src=&quot;&quot;/&amp;gt; &amp;lt;/div&amp;gt; css样式为： .bo
JavaScript实现宽高自适应的居中弹出层
lzc的博客
05-21 1733
效果图如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;     &lt;link rel="stylesheet" href="http://cdn.stati
js弹出窗口自适应大小
hareee的博客
06-23 1910
  //弹出窗口高度调整自适应    function resetDialogHeight(){   if(window.dialogArguments == null){    return; //忽略非模态窗口   }   //正文高度   var height = document.body.scrollHeight;   //卷进去高度   var heightTop = document...
自适应弹出框-垂直居中
liyuedan的专栏
05-12 1万+
自适应弹出框 .box-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); z-index: 99; display: none; } .box { position: ab
vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
李墨瞳的博客
12-10 3477
vue+element的弹窗，自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件，不允许拖到可视范围之外了。添加了弹窗如果有表格，对表格进行自适应的功能
showModalDialog弹窗怎么设置左右滚动条自适应
最新发布
07-28
要设置`showModalDialog`弹窗的左右滚动条自适应，你可以通过设置弹窗内容的CSS样式来实现。下面是一个示例代码： ```html <style> html, body { overflow: hidden; /* 禁用页面滚动条 */ } .dialog-content { overflow-x: auto; /* 自动显示横向滚动条 */ white-space: nowrap; /* 防止内容换行 */ } </style> <script> function openModalDialog() { var dialogArgs = { // 弹窗参数 }; var dialogFeatures = [ // 弹窗特性 ].join(';'); window.showModalDialog('dialog.html', dialogArgs, dialogFeatures); } </script> <button onclick="openModalDialog()">打开弹窗</button> ``` 在上面的示例中，我们使用`overflow-x: auto`样式来自动显示横向滚动条。同时，我们还禁用了页面的滚动条，以确保只有弹窗内容会出现滚动条。 你可以根据自己的需求调整弹窗的参数和特性，并在`dialog.html`文件中编写弹窗的内容。记得在弹窗中添加适当的CSS类名（例如`.dialog-content`）来应用上述样式。 请注意，`showModalDialog`方法已被标记为过时，不再被现代浏览器所支持。如果你要在现代浏览器中实现类似的弹窗效果，推荐使用其他方法或库来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值