<!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>show window</title>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:35px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<script>
//弹出窗口方法
function showMessageBox(wTitle,content,wWidth)
{
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;opacity:0.40";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+
wTitle+"</td><td style='width:1px;'>"+
"<input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' />"+
"</td></tr></table></div>"+
"<div class='mesWindowContent' id='mesWindowContent'>"+
content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(window.outerWidth-wWidth)/2+"px;top:"+(window.outerHeight)/4+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//关闭窗口
function closeWindow(){
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//测试弹出
function testMessageBox(){
messContent="<div style='padding:20px 0 20px 0;text-align:center'>"+
"用户名:<input type='text'/><br/>"+"密  码:<input type='text'/>"+
"</div>";
showMessageBox('登录',messContent,350);
}
</script>
</head>
<body>
<div style="padding:20px">
<div style="text-align:center";>
<input type="button" name="button" value="show window" onclick="testMessageBox()"/>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Alexander!
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
分享到：
相关推荐
"超炫登陆注册弹窗效果"是一个专为提升用户体验而设计的技术实践，它结合了jQuery、JavaScript和移动适配等技术，实现了优雅的弹窗效果，让用户在进行登录或注册操作时感受到更加流畅和互动的界面。 首先，我们来...
在JavaScript编程中，有时我们需要实现一个功能，使得手机端的活动弹窗每天只显示一次，以避免对用户造成过多的打扰。这个需求涉及到浏览器的本地存储（localStorage）以及JavaScript的时间和日期处理。以下是一个...
综上所述，本文详细讲解了如何利用JavaScript和CSS技术，通过遮罩层实现点击特定区域以外部分弹出和关闭弹窗的技巧。同时也强调了调试工具的重要性，并推荐了相关专题材料以供深入学习。这对于前端开发者在交互设计...
JavaScript（简称JS）是一种轻量级的编程语言，广泛用于网页和网络应用的开发，尤其在实现用户交互方面起着至关重要的作用。...记得在实现弹窗效果的同时，也要考虑到性能优化，避免过度动画导致的性能问题。
总结，"arcgis js实现的弹窗"是一个结合了地图交互、UI设计和地理信息展示的实例，它展示了ArcGIS JavaScript API的强大功能。通过学习和实践，开发者可以掌握创建类似功能的技术，提升GIS应用的用户体验。
以上就是纯JavaScript实现弹窗效果的基本思路和关键点。通过掌握这些知识，你可以自由地创建各种自定义弹窗，满足不同场景的需求。记住，实践是检验真理的唯一标准，多动手尝试，结合实际项目进行练习，你会更加熟练...
接下来，我们探讨如何实现不同的弹窗效果： - 提示信息：用于显示简短的提示或消息，通常不需要用户交互即可自动关闭。 - 警告对话框：带有警告图标，用于告知用户可能的危险操作，通常需要用户确认后才能继续。 - ...
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：...
在IT行业中，jQuery是一款...通过调整CSS样式和增强功能，你可以根据项目需求定制更个性化的弹窗效果。记住，良好的用户界面和交互体验对于任何网站来说都是至关重要的，因此这类特效能够提升用户的满意度和停留时间。
在IT行业中，JavaScript和HTML是构建网页交互性的重要技术，而`three.js`是一个非常流行的JavaScript库，专门用于在浏览器中创建和展示3D图形。本示例将探讨如何使用`three.js`来实现3D模型点击后弹出HTML页面的功能...
在JavaScript中实现弹窗效果是一项常见的任务，通常用于提示用户信息、确认操作或者展示详细内容。这个例子展示了如何使用纯JS来创建一个简单的警告弹窗。以下是对标题和描述中所述知识点的详细解释： 1. **HTML...
在网页设计中，为了增强用户体验，常常需要在用户操作时弹出视频窗口，例如放置在页面右下角。本文将详细讲解如何使用...通过不断学习和实践，可以进一步提升JavaScript在实现此类交互效果时的灵活性和可扩展性。
在解压后，开发者可以找到包含HTML、CSS和JavaScript代码的文件，其中HTML文件负责结构，CSS文件负责样式，而JavaScript文件（可能命名为`jquery.messageBox.js`或类似的名称）则是实现弹窗功能的核心代码。...
"js仿flash动态图片弹窗展示效果"就是一个这样的尝试，它旨在利用JavaScript实现类似Flash的图片动态弹窗效果，为用户提供更现代、更兼容的体验。 这个压缩包文件的核心内容可能包括一个或多个JavaScript脚本，它们...
本篇将详细讲解如何利用JavaScript实现这一功能，以及从提供的源码中学习到的关键知识点。 首先，我们要了解JavaScript的基本语法和DOM操作。JavaScript是一种解释型的、跨平台的脚本语言，它常用于网页交互和动态...
"非常绚丽的js弹窗"是一个关于利用JavaScript实现美观、吸引用户的弹出窗口的项目。在这个项目中，样式源代码和JavaScript代码一同提供了创建独特弹窗效果的完整解决方案。 首先，我们要理解弹窗的基本概念。在网页...
"js工具类 弹窗"是指将弹窗功能作为一个独立的模块来实现，这样的设计可以使弹窗的样式、行为和调用方式标准化，提高代码的可维护性和复用性。下面我们将深入探讨JavaScript中的弹窗实现及其相关知识点。 首先，...
总结来说，"JS+CSS精美弹窗"是一个关于如何利用JavaScript和CSS技术创建功能完备、视觉效果优秀的弹出窗口的示例，涉及到的关键技术包括事件监听、动画效果、跨窗口通信和本地存储。这个项目对于想要提升Web前端开发...
总结来说，"layer二次弹窗确认所需要的js"是一个利用layer.js库实现的高效二次确认弹窗解决方案。通过灵活运用layer的API，我们可以轻松创建具有自定义内容和样式的弹窗，从而在网页应用中实现更加友好的用户交互。
在实际项目中，开发者可以根据需求选择合适的弹窗效果，并结合JavaScript和jQuery等库，实现更复杂的交互逻辑。同时，为了确保兼容性，应始终考虑对不支持CSS3或SVG的浏览器进行适当的降级处理。通过持续探索和实践...