open.window弹出窗口实现居中

Javascript代码
function openwindow(url,name,iWidth,iHeight)
 {
  var url;                                 //转向网页的地址;
  var name;                           //网页名称,可为空;
  var iWidth;                          //弹出窗口的宽度;
  var iHeight;                        //弹出窗口的高度;
  var iTop = (window.screen.availHeight-30-iHeight)/2;       //获得窗口的垂直位置;
  var iLeft = (window.screen.availWidth-10-iWidth)/2;           //获得窗口的水平位置;
  window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
 }
使用时调用这个函数即可。如:
<a href="javascript:void(0);" οnclick="javascript:openwindow('a.html','',400,200);">转到a</a>
缺点:与原窗口的大小,位置无关。
首先需要明确一点,`window.open` 是 JavaScript 中的一个方法,用于在新窗口或标签页中打开一个指定的 URL。而 Layout(布局)是指 HTML 和 CSS 中用于控制页面元素排版和样式的技术。 因此,要实现 `window.open` 的效果,需要结合 JavaScript 和 HTML/CSS 布局。以下是一种实现方式: 1. HTML 布局 在 HTML 中创建两个 `div` 元素,一个用于放置主窗口内容,一个用于放置弹出窗口内容,如下所示: ```html <div class="main-window"> <!-- 主窗口内容 --> </div> <div class="popup-window hidden"> <!-- 弹出窗口内容 --> </div> ``` 其中,`.main-window` 和 `.popup-window` 分别表示主窗口弹出窗口的样式类名。`.hidden` 是另一个样式类,用于将元素隐藏,后面会用到。 2. CSS 布局 使用 CSS 对两个 `div` 元素进行布局,如下所示: ```css .main-window { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .popup-window { width: 400px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } ``` 其中,`.main-window` 元素的宽度和高度设置为 100%,使其占据整个页面。使用 `position: absolute` 将其定位到页面左上角,并设置 `z-index: 1` 使其在弹出窗口下方。`.popup-window` 元素的宽度和高度设置为固定值,使用 `position: absolute` 将其定位到页面中心,并使用 `transform: translate(-50%, -50%)` 居中显示,同时设置 `z-index: 2` 使其在主窗口上方。 3. JavaScript 实现 使用 JavaScript 监听某个事件(例如点击按钮),触发弹出窗口的显示。在弹出窗口显示时,将 `.popup-window` 元素的 `hidden` 样式类移除即可。隐藏弹出窗口时,再次添加 `hidden` 样式类即可。 ```javascript const popupWindow = document.querySelector('.popup-window'); // 监听按钮点击事件 button.addEventListener('click', () => { // 显示弹出窗口 popupWindow.classList.remove('hidden'); }); // 隐藏弹出窗口 function hidePopupWindow() { popupWindow.classList.add('hidden'); } ``` 以上就是一种使用 HTML/CSS 布局和 JavaScript 实现 `window.open` 的效果的方法。需要注意的是,此方法只是一种简单的实现,如果需要更多的功能和效果,还需要进行进一步的优化和调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值