`
as1001001
  • 浏览: 89938 次
  • 性别: Icon_minigender_1
  • 来自: 鞍山
社区版块
存档分类
最新评论

JS弹出窗口

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script> 
function _(id) { 
  return document.getElementById(id); 
} 
var ti = null; 
function loading(){ 
    var tmd = 0; 
    var x1 = document.documentElement.clientWidth;  
    var y1 = document.body.offsetHeight; 
    var y2=document.documentElement.clientHeight;//整个页面的高度 
    with(_("div1")){ 
       style.width=x1+"px"; 
       if(y2>y1){ 
       style.height=y2+"px"; 
       }else{ 
       style.height=y1+"px"; 
       } 
       style.overflowX="hidden"; 
       style.overflowY="hidden"; 
       style.visibility="visible"; 
    } 
    _("div1").style.left=0; 
    _("div1").style.filter='Alpha(Opacity=0)'; 
    document.body.style.overflowX="hidden"; 
    document.body.style.overflowY="hidden"; 
    _("div2").style.top=parseInt(document.documentElement.scrollTop)+((document.documentElement.clientHeight-250)/2)+"px";  
    _("div2").style.left="50%"; 
    _("div2").style.marginLeft="-190px" 
    _("div2").style.visibility="visible"; 
    ti = setInterval("hei()",10); 
} 
var x = 0; 
function hei(){ 
    x+=10; 
    if(x<31){ 
        if(document.all){ 
            _("div1").style.filter='Alpha(Opacity='+x+')'; 
        }else{ 
            _("div1").style.opacity=""+x/100+"";     
        } 
    } 
} 
function unload(){ 
_("div1").style.visibility="hidden"; 
_("div2").style.visibility="hidden"; 
clearInterval(ti); 
x=0; 
} 
</script> 
<style> 
*{  
    padding: 0;  
     margin: 0;  
} 
div{ 
background-color:#fff; 
} 
#div1{ 
position:absolute; 
visibility:hidden; 
filter:alpha(opacity=70); 
background-color:#a6a6a6; 
z-index:9; 
} 
#div2{ 
position:absolute; 
width:371px; 
height:auto; 
border:2px #aeddf1 solid; 
visibility:hidden; 
left:expression((body.clientWidth-300)/2); 
background-color:#CCCCCC; 
text-align:center; 
z-index:10; 
} 
#top{ 
background-color:#eef7fe; 
height:23px; 
border-bottom:1px #aedef2 solid; 
text-align:right; 
} 
</style> 
</head> 
<body> 
<div id="div1" align="center"></div> 
<div id="div2"> 
    <div id="top"><img src="http://www.wotuitui.com/images/close.gif" style="cursor:hand;" onClick="unload();" alt="点击关闭"/></div> 
<div><br/><br/><br/>内容<br/><br/><br/><br/><br/></div> 
</div> 
<a href="javascript:loading();">打开</a> 
</body> 
</html>
分享到:
评论

相关推荐

    JS弹出窗口JS弹出窗口JS弹出窗口JS弹出窗口

    在网页开发中,JS常用于创建各种弹出窗口,以实现如提示信息、用户输入对话框或者自定义内容窗口等功能。本篇文章将详细探讨JS弹出窗口的实现方式和相关知识点。 首先,JS中最常见的弹出窗口是`alert()`函数。它会...

    javascript 弹出窗口

    在给定的标题“javascript 弹出窗口”和描述“推荐一个非常好用的javascript弹出窗口控件”中,我们可以推测这是一个关于使用JavaScript实现弹出窗口的控件库。下面我们将深入探讨JavaScript弹出窗口的相关知识点。 ...

    JAVASCRIPT弹出窗口大总结

    ### JavaScript弹出窗口知识点总结 #### 一、概述 JavaScript是一种广泛使用的脚本语言,它在前端开发中占据着极其重要的地位。通过JavaScript,开发者可以实现网页与用户的交互功能,其中弹出窗口就是一种常见的...

    玩透javascript弹出窗口

    JavaScript弹出窗口是一种常见的网页交互方式,用于向用户展示额外信息或进行特定操作。本文将深入探讨如何设计和控制JavaScript弹出窗口。 首先,最基本的弹出窗口代码是使用`window.open`函数。例如: ```...

    js弹出窗口\GenJS

    `GenJS`可能是指一个特定的库或者工具,用于生成JavaScript弹出窗口效果。下面将详细讨论JavaScript弹出窗口的实现以及可能与`GenJS`相关的知识点。 1. **JavaScript 弹出窗口** JavaScript 提供了三种基本的弹出...

    js 弹出窗口

    在这个场景下,"lhgdialog.js"可能是一个这样的库,它扩展了JavaScript弹出窗口的功能。 "lhgdialog.js"可能包含以下特性: 1. **模态效果**:阻止用户与背景页面交互,直到弹出窗口被关闭。 2. **自定义样式**:...

    功能强大的JS弹出窗口

    标题中的“功能强大的JS弹出窗口”指的是利用JavaScript实现的各种弹出对话框功能,这些对话框能够增强用户体验,提供丰富的交互方式。 在描述中提到的弹出窗口js代码,它提供了多种弹出效果,让我们一一解析: 1....

    超好用的js弹出窗口

    首先,让我们了解一下什么是JavaScript弹出窗口。在网页开发中,我们经常使用`window.alert()`、`window.confirm()`和`window.prompt()`这三个函数来创建基本的弹出对话框。然而,这些内置的弹出窗口功能有限,样式...

    JAVASCRIPT弹出窗口代码

    ### JavaScript弹出窗口代码详解 在网页开发过程中,有时我们需要创建一个新的浏览器窗口来显示特定的信息或功能,这就需要用到JavaScript中的`window.open()`方法。本文将详细介绍如何使用此方法以及其参数的意义...

    自定义js弹出窗口(弹出层)

    在网页开发中,自定义js弹出窗口,也被称为弹出层或对话框,是一种常见的交互设计技术。这种技术允许开发者在用户与页面交互时显示额外的信息或功能,而不会中断主页面的工作流程。在本教程中,我们将深入探讨如何...

    非常炫的js弹出窗口

    通过上述技术,我们可以创建出一个不仅功能强大,而且视觉效果出色的JavaScript弹出窗口。在实际开发中,可以参考现有的库和框架,如jQuery UI、SweetAlert2或者自定义实现,以满足特定项目的需求。对于初学者,理解...

    javascript弹出窗口lhgdialog

    javascript弹出窗口lhgdialog 非常好用

    漂亮的js弹出窗口(多用于图片)

    JavaScript弹出窗口通常是通过`window.open()`函数来实现的,它可以创建一个新的浏览器窗口或者在已存在的窗口中打开新的页面。但是,这种原生的弹出方式往往过于简单,无法满足复杂的交互需求,比如图片预览、滑动...

    JS弹出窗口使用说明

    JavaScript(简称JS)是一种轻量级的编程语言,广泛用于网页和网络应用开发,而弹出窗口是JS中常见的交互方式。这篇文档主要介绍了名为lhgdialog的JS弹出窗口控件的使用方法。 lhgdialog控件由一系列文件组成,它们...

    js弹出窗口、弹出层

    总结,"js弹出窗口、弹出层"是网页交互中的重要元素,涉及到了JavaScript的DOM操作、事件处理、样式控制等多个方面。理解并掌握如何创建和使用弹出层,对于提升网页的用户体验具有重要意义。"FineMessBox"可能提供了...

    jQuery popup javascript 弹出窗口

    总的来说,jQuery popup javascript弹出窗口的实现涉及到JavaScript编程、CSS样式设计、事件处理、浏览器兼容性优化等多个方面,是一个综合性的网页开发任务。通过研究提供的文件,可以深入理解这些技术的结合应用。

    js弹出窗口总结

    总结,JavaScript弹出窗口是与用户进行交互的重要手段。从简单的`alert`、`confirm`、`prompt`到自定义模态对话框,再到第三方库的支持,开发者可以根据实际需求选择最适合的方法来实现弹出窗口。理解并掌握这些技巧...

    js弹出窗口 + 获取上传文件全路径

    在这个场景中,我们关注的是"js弹出窗口 + 获取上传文件全路径"的主题。这涉及到两个主要的知识点:JavaScript创建弹出窗口以及获取文件的完整路径。 首先,让我们详细探讨JavaScript创建弹出窗口。在Web开发中,弹...

    JS弹出窗口源代码

    总的来说,JavaScript弹出窗口是网页交互设计的重要组成部分,通过不同的函数和库,我们可以实现各种复杂的用户交互,提高网页的动态性和互动性。对于开发者来说,熟练掌握JS弹窗的使用不仅可以提升工作效率,还能为...

Global site tag (gtag.js) - Google Analytics