`
yonguo
  • 浏览: 246186 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

居中的弹出式窗口

JavaScriptHTML 
阅读更多

方式一：JS代码创建窗口

js 代码
  1. <script>   
  2. var popup = new Object()   
  3.   
  4. function CenterPopup(URL, width, height)   
  5. {   
  6.     // Window dimensions:   
  7.     var theWidth, theHeight;   
  8.     if (window.innerWidth)   
  9.     theWidth=window.innerWidth;   
  10.     else if (document.documentElement && document.documentElement.clientWidth)   
  11.     theWidth=document.documentElement.clientWidth;   
  12.     else if (document.body)   
  13.     theWidth=document.body.clientWidth;   
  14.        
  15.     if (window.innerHeight)   
  16.     theHeight=window.innerHeight;   
  17.     else if (document.documentElement && document.documentElement.clientHeight)   
  18.     theHeight=document.documentElement.clientHeight;   
  19.     else if (document.body)   
  20.     theHeight=document.body.clientHeight;   
  21.        
  22.     // Window origin   
  23.     var originX, originY;   
  24.     if (window.innerHeight) {   
  25.     originX=screenX+(window.outerWidth-window.innerWidth);   
  26.     originY=screenY+(window.outerHeight-window.innerHeight);   
  27.     }   
  28.     else {   
  29.     originX=screenLeft;   
  30.     originY=screenTop;   
  31.     }   
  32.        
  33.     var X = theWidth/2;   
  34.     var Y = theHeight/2;   
  35.     var features='"scrollbars=0, ' +  
  36.     'width=' + width + ', ' +  
  37.     'height=' + height + ', ' +  
  38.     'top=' + parseInt(originY + (Y - (height/2))) + ', ' + //  
  39.     'left=' + parseInt(originX + (X - (width/2))) + '"';   
  40.     popup = window.open(URL, "PopUp", features);   
  41.     popup.focus()   
  42. }   
  43. </script>   
  44.   
  45. <html>   
  46. <body>   
  47.     <a href="#" onclick="CenterPopup('house.html',500,400)">open new window</a>   
  48. </body>   
  49. </html>  

方式二：open()打开窗口

js 代码
  1. <HTML>   
  2. <Head>   
  3. <Script Language=JavaScript>   
  4.   
  5. var popWin = "";   
  6.   
  7. function openwin(url, strWidth, strHeight){   
  8.   
  9. if (popWin != ""){popWin.close()}   
  10. leftStr = (screen.width-strWidth)/2;   
  11. topStr = (screen.height-strHeight)/2;   
  12. windowProperties = "toolbar=no,menubar=no,scrollbars=no,stausbar=no,height="+strHeight+",width="+strWidth+",left="+leftStr+",top="+topStr+"";   
  13. popWin = window.open(url,'newWin',windowProperties);   
  14. }   
  15.   
  16. </Script>   
  17. </Head>   
  18. <Body>   
  19. <a href="#" onClick="openwin('house.html',400,325)">Open a centered popup window</a>    
  20. </Body>   
  21. </HTML>   
分享到：
| 关闭窗口时执行，刷新窗口不执行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    弹出层居中

    8. 响应式设计：随着移动设备的普及，弹出层的居中还应考虑到响应式设计，即在不同屏幕尺寸下保持良好的显示效果。 9. 键盘和辅助技术友好：为了提升无障碍性，弹出层应该能够通过键盘导航，并且能够被屏幕阅读器等...

    flex 弹出窗口并居中显示

    本文将详细讲解如何利用Flex布局实现弹出窗口并使其居中显示，这对于创建各种交互式功能，如模态框、提示框等至关重要。 一、Flex布局基础 1. Flex容器：一个具有`display: flex`或`display: inline-flex`样式的...

    ASP 开发实例 窗口一些设置实例 自动关闭的广告窗口 关闭弹出窗口刷新父窗口 居中显示弹出的窗口 鼠标指针滑过链接样式 离开时启动收藏夹 安徽机电职业技术学院 陈伟

    弹出窗口的居中显示通常需要计算浏览器窗口的大小和弹出窗口的大小，然后设置弹出窗口的位置。这可以通过JavaScript的window.open方法实现，通过指定窗口的坐标参数使其相对于屏幕中心定位。 4. **鼠标指针滑过...

    弹出窗口代码大全.txt

    ### 弹出窗口代码大全详解 #### 一、引言 在网页开发中，弹出窗口是一种常见的交互方式，它可以用于展示广告、提供额外信息或引导用户进行特定操作等。根据给定文件“弹出窗口代码大全.txt”的描述，本文将详细...

    功能强大的JS弹出窗口

    3. **可定位在指定位置的弹出窗口**：开发者可以通过JS代码控制弹出窗口在屏幕上的具体位置，比如居中、靠左、靠右或指定坐标，以适应不同场景的需求。 4. **可控制父级页面的弹出窗口**：这种功能允许弹出窗口与...

    js弹出模态窗口

    在网页设计中，弹出模态窗口是一种常用的用户交互方式，用于显示重要的信息或者进行确认操作，而无需离开当前页面。模态窗口阻止了用户对页面其他部分的互动，直到用户关闭了模态窗口为止。 在"js弹出模态窗口"这个...

    JS实现弹出居中的模式窗口示例

    本示例将详细介绍如何使用JavaScript实现这样的居中弹出模式窗口。 首先，我们需要了解JavaScript的基本概念。JavaScript是一种广泛使用的客户端脚本语言，它可以直接在用户浏览器中运行，用于处理DOM（Document ...

    Cocos2d-x游戏开发之弹出式全屏提示窗口源码

    在Cocos2d-x游戏开发中，创建一个弹出式全屏提示窗口是十分常见的需求。这主要用于显示游戏中的各种信息，如得分、提示、警告或者用户交互反馈。本篇文章将深入探讨如何实现这样一个功能，并提供相关的源码分析。 ...

    弹出窗口大全(js)

    在Web开发中，JavaScript经常被用来创建各种交互式功能，其中弹出窗口是非常常见的一个应用场景。它主要用于显示额外的信息、表单或者对话框等，对于提高用户体验非常有帮助。 #### 二、主要方法与实现原理 ##### ...

    浏览器窗口放大缩小后页面内容居中解决方法

    在网页设计中，确保页面内容在不同屏幕尺寸和浏览器窗口大小下都能保持居中是非常重要的。这涉及到响应式设计和用户界面的优化。标题“浏览器窗口放大缩小后页面内容居中解决方法”揭示了我们今天要探讨的核心问题：...

    window.open()弹出居中的窗口

    3. **响应式设计**：在移动设备上，屏幕尺寸可能会更小，因此需要考虑如何让弹出窗口在不同尺寸的设备上都能够良好地显示。 4. **代码优化**：上述示例中的`innerHeight`和`innerWidth`参数并不被所有浏览器支持，...

    div本页面弹出窗口

    在网页设计领域，"div本页面弹出窗口"是一个常见的需求，主要用来提供一种交互式用户体验，例如显示警告、提示信息或进行表单验证。在本文中，我们将深入探讨使用`div`元素创建弹出窗口的技术细节，以及如何通过CSS...

    CSS+JS弹出窗口

    这段CSS代码定义了一个居中、带内边距的弹出窗口，初始状态为隐藏。 接下来，我们使用JavaScript来控制弹出窗口的显示和隐藏。JavaScript是一种客户端脚本语言，可以直接在浏览器中运行，用于增强网页的交互性。在...

    javascript IE窗口居中

    标题“javascript IE窗口居中”涉及的是在Internet Explorer（IE）浏览器中，使用JavaScript实现弹出窗口自动居中的技术。JavaScript是一种广泛应用于网页和网络应用的脚本语言，它允许开发者在用户与网页交互时动态...

    弹出层居中问题版1

    4. **居中弹出层css控制问题版.html**：此文件可能涉及更复杂的CSS控制，比如响应式设计，使弹出层在不同屏幕尺寸下都能保持居中。这可能包括媒体查询（Media Queries）的应用，以适应不同的设备或窗口大小。 在...

    漂亮的div弹出窗口

    在网页设计中，"漂亮的div弹出窗口"是一种常见的交互元素，它用于向用户展示重要的信息、提示或者功能。div是HTML中的一个区块级元素，全称为Division，用于组织页面内容。通过CSS（Cascading Style Sheets）进行...

    optin-form:这是一个弹出式窗口形式

    查看详细信息： : ＃弹出式选择加入表单的功能： 以下是“ MCT弹出式窗口加入表单”的功能列表： ＃1。 时尚且易于使用＃2。 移动响应式＃3。 自动将自己居中显示在屏幕上＃4。 自动适应屏幕＃5。 支持任何设备用户...

    弹页面窗口

    9. **响应式设计**：随着移动设备的普及，弹出窗口应具备响应式设计，适应不同屏幕尺寸。这需要调整元素的大小和位置，可能还需要根据设备方向改变布局。 10. **兼容性考虑**：考虑到不同的浏览器对JavaScript和CSS...

    右键弹出式菜单的用法,说明+源代码

    ### 右键弹出式菜单的用法及源代码解析 #### 一、概述 本文旨在详细介绍如何在基于Microsoft Visual C++ 5.0 (VC++5) 和 Microsoft Foundation Classes (MFC) 的应用程序中实现右键弹出式菜单功能，并提供具体的源...

    mvc5jquery弹出层居中并显示遮罩

    在本项目"Mvc5jQuery弹出层居中并显示遮罩"中，开发者利用Microsoft的ASP.NET MVC5框架和jQuery库，实现了弹出窗口的居中显示以及半透明遮罩效果，提升了用户界面的美观度和易用性。 首先，我们来了解一下MVC5框架...

Magicbox
Global site tag (gtag.js) - Google Analytics