【前端】JavaScript控制showModalDialog根据内容自动调整窗口大小

最新推荐文章于 2023-06-05 16:14:08 发布

原创最新推荐文章于 2023-06-05 16:14:08 发布 · 569 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

收录于

软件开发专栏收录该内容

88 篇文章

订阅专栏

本文介绍了如何使用JavaScript在页面加载时，根据屏幕可用空间和内容尺寸动态调整模态对话框的宽度、高度以及位置，确保其在不同设备和窗口大小下保持最佳显示效果。

showModalDialog根据内容自动调整窗口大小

在对话框的页面中加入如下代码：

window.onload = function()
{
if( document.body.scrollWidth > (window.screen.availWidth-100) ){
window.dialogWidth = (window.screen.availWidth-100).toString() + “px”
}else{
window.dialogWidth = (document.body.scrollWidth +50).toString() + “px”
}

     if( document.body.scrollHeight > (window.screen.availHeight-70) ){ 
         window.dialogHeight = (window.screen.availHeight-50).toString() + "px" 
     }else{ 
         window.dialogHeight = (document.body.scrollHeight +115).toString() + "px" 
     }     
     window.dialogLeft = ((window.screen.availWidth - document.body.clientWidth) / 2).toString() + "px" 
     window.dialogTop = ((window.screen.availHeight - document.body.clientHeight) / 2).toString() + "px"
 }