浏览器-窗口,对话框

[size=small]Javascript有许多内建的方法来产生对话框,
如:window.alert(), window.confirm(),window.prompt().等。

window.showModalDialog() 用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。

window.showModelessDialog() 用来创建一个显示HTML内容的非模态对话框。
当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它;

window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口句柄
parameters 为窗口参数(各参数用逗号分隔)


示例:
<SCRIPT>
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
//写成一行
</SCRIPT>
脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。


使用js中的 window.open 有一个缺点就是容易被浏览器屏蔽。

<a href="#" target="_blank" ></a>

<a href="javascript:ow('http://www.aspxhome.com/');">

onclick="window.open('/red/','','width=800,height=300')"

onclick="window.opener=null;window.open('','_top');"
这种方法打开的窗口,关闭时不会出现对话框。
window.top.close();

<script language="javascript" type="text/javascript">
window.location.href="http://www.dollare.com.cn";
</script>

onclick="try{
window.navigate('http://www.google.com')
}catch(e){
alert('不支持此方法')
}"
现阶段仅 IE,Opera 支持 window.navigate 方法。
不适用其他浏览器,调用 window.navigate 方法跳转页面,与window.location.href类似。


返回: onclick="window.history.back(-1);"
<a href="javascript:history.go(-1)">返回</a>
[/size]
### 实现带有滚动条效果的 `el-dialog` 为了使 `el-dialog` 对话框中的内容能够正常显示并支持滚动,可以采用多种方法来处理这个问题。 #### 方法一:局部或全局设置样式 通过覆盖默认样式,在 `.el-dialog__body` 或者整个对话框上应用特定的高度和溢出属性。这种方式适用于只需要修改单个实例的情况: ```css .el-dialog { max-height: 80vh; } .el-dialog__body { height: calc(100% - 56px); /* 减去头部高度 */ overflow-y: auto; } ``` 这种方法简单易行,并且不会影响其他地方使用的相同组件[^1]。 #### 方法二:调整 body 元素上的 class 类名行为 当弹窗开启时,框架会在 `<body>` 上添加一个名为 `el-popup-parent--hidden` 的 CSS 类,这可能会改变页面的整体布局,比如引入不必要的水平滚动条等问题。可以通过重新定义该类的行为来解决问题: ```css .el-popup-parent--hidden { padding-right: 0 !important; overflow: hidden !important; } ``` 此解决方案不仅解决了由于弹层引起的视觉问题,还保持了原有功能不变[^2]。 #### 方法三:内部容器自定义滚动区域 如果希望仅让部分内容可滚动而不是整个对话框,则可以在 `el-dialog` 内创建一个新的包裹元素 (如 `<div>`) 并为其指定固定大小以及 `overflow:auto`, 这样只有这部分会被卷动而不会干扰到标题栏或其他部分的内容展示. ```html <template> <el-dialog :visible.sync="dialogVisible"> <!-- 头部 --> <span slot="title">Dialog Title</span> <!-- 可滚动体 --> <div style="max-height: 400px; overflow: auto;"> {{ longContent }} </div> <!-- 底部按钮区 --> <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog()">Cancel</el-button> <el-button type="primary" @click="confirmAction()">Confirm</el-button> </span> </el-dialog> </template> ``` 上述代码片段展示了如何在一个 Vue 单文件组件中实现这一点。这里的关键在于设置了最大高度 (`max-height`) 和自动隐藏/显示垂直方向上的滚动条(`overflow: auto`). 当内容超过设定的最大高度时就会触发滚动机制[^4]. #### 配置项优化 对于不想看到浏览器窗口随弹窗状态变化而产生的滚动条现象,还可以考虑禁用锁屏滚轮的功能,默认情况下 Element UI 是启用这项特性的。可以在项目入口处导入 ElementUI 后立即更改这一选项为 `false`. ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; Vue.use(ElementUI, { Dialog: { props: { lockScroll: { default: false, }, } } }); ``` 这样做之后,即使打开了多个模态框也不会再有额外的滚动条出现了.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值