开始学Javascript用的提示都是Alert。一成不变的样式很令人讨厌，而且与整个网站的风格很不协调。用户体验也不好。
现在重新写一个弹出层的组件，很多地方都可以自定义了。
写的很简单，其实不直接将Styel设定好而只是设定好Class，然后用Css来控制控件的样式。
没有重复生成消除层而只是将它隐藏是因为反复生成销毁的话开销太大。
<script language="javascript" defer>function getPageSize(){
var winWidth = document.documentElement.clientWidth;
var winHeight = document.documentElement.clientHeight;
var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;
var width = pageWidth>winWidth?pageWidth:winWidth;
var height = pageHeight>winHeight?pageHeight:winHeight;
return {"width":width,"height":height};
}
function makeAlert(message){
var alertPanel = document.getElementById("alt");
if(!alertPanel){
alertPanel = document.createElement("div");
alertPanel.setAttribute('id','alt');
var pageSize = getPageSize();
alertPanel.style.left = pageSize.width/2 - 250 + "px";
alertPanel.style.top = pageSize.height/2 + "px";
alertPanel.style.width = "500px";
alertPanel.style.height = "300px";
alertPanel.style.position = "absolute";
alertPanel.style.padding = "50px";
alertPanel.style.backgroundColor = '#EFEFEF';
alertPanel.style.filter = "alpha(opacity=30)";
alertPanel.style.opacity = "0.3";
alertPanel.innerHTML = "<div style='height:150px;background-color:#CCC;'>"+message+"</div><div style='height:65px;padding:15px;background-color:#BBB;text-align:center'><input value='Close' type='button' onclick='closeAlert()'/></div>";
document.body.appendChild(alertPanel);
}
alertPanel.style.display = "";
}
function closeAlert(){
var alertPanel = document.getElementById("alt");
alertPanel.style.display = "none";
}
</script>
<body><input type="button" value="Pop" onClick="makeAlert('haha');"/></body>
分享到：
相关推荐
本资源"jQuery实现的五种不同弹出提示层效果插件.zip"提供了一套实现弹出提示层效果的jQuery插件，这在网页交互和用户体验设计中非常常见。下面我们将详细探讨jQuery弹出提示层的相关知识点。 1. **jQuery基础知识*...
【顶部弹出提示层】是一种常见的用户界面设计元素，它在网页或应用中起到通知、警告、确认或者提供额外信息的作用。基于jQuery实现的顶部弹出提示层利用了JavaScript库的强大功能，使得开发者能够轻松地在用户点击...
网页右下角弹出提示层是一种常见的用户交互设计，它在网页中扮演着重要的角色，为用户提供信息提示、操作反馈或者重要通知。这种设计通常采用轻量级的对话框，不会完全遮挡页面内容，允许用户在查看提示的同时继续...
本文将深入探讨如何使用jQuery实现鼠标悬停（hover）时，图片遮罩弹出提示层的特效。 首先，我们从基础开始。jQuery的`hover()`函数是处理鼠标进入（mouseenter）和离开（mouseleave）事件的便捷方法。它接受两个...
在Web开发中，我们经常需要创建一些用户友好的提示层，如浮动在页面顶部或者跟随鼠标点击位置弹出的信息提示。这样的功能可以增强用户体验，使得信息传递更加直观和高效。本文将围绕“Js浮动页面顶部或鼠标点击处弹...
在网页设计和开发中，"背景变暗，弹出提示层"是一种常见的用户体验设计手法，通常用于显示重要的信息或者引导用户进行特定操作。这种效果能够有效地聚焦用户的注意力，同时为其他页面元素创建一种视觉上的隔离感。...
在电商网站开发中，jQuery库经常被用于实现各种交互效果，包括弹出提示层。jQuery是一种轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本话题将深入探讨如何使用jQuery创建电商网站中...
这个"电商网站jQuery弹出提示层代码.zip"文件提供了一种实现这一目标的方法，它包含了一系列用于创建动态、交互式提示层的HTML5、jQuery、JavaScript和CSS代码。接下来，我们将深入探讨这些技术以及它们在构建电商...
jQuery弹出提示层插件是一种常见的前端开发工具，主要用于在网页上实现各种动态提示效果，如警告、确认对话框、信息提示等。这个压缩包文件包含了一个基于jQuery库的插件，可以方便地集成到你的网页项目中，提供丰富...
本文将深入探讨如何使用jQuery实现一个最简单的动画弹出提示层的实例，帮助开发者快速创建动态用户体验。 首先，理解jQuery的核心概念至关重要。jQuery通过选择器选取HTML元素，然后对这些元素进行操作。其动画功能...
接着，`js`文件中将包含实现提示层弹出功能的jQuery代码。在jQuery中，我们可以使用`.dialog()`方法来创建提示层，它来自jQuery UI库，提供了一种创建对话框和提示框的方式。例如： ```javascript $(document)....
在网页设计中，提升用户体验的一个重要方式是通过各种交互效果，其中一种常见的手法就是鼠标悬停时弹出提示层，为用户提供更多信息。本篇将详细介绍如何使用Div和CSS3来实现这种不同方向的提示层特效。 首先，Div...
本篇文章将详细讲解如何利用jQuery来制作弹出提示层，创建一个弹窗确认提示框。 首先，理解jQuery的核心概念至关重要。jQuery通过选择器选取DOM元素，然后对这些元素进行操作。例如，`$("#myElement")`会选择ID为...
JavaScript仿腾讯“网眼”弹出提示层是一种常见的前端交互设计，主要目的是提供一种轻量级的提示方式，用户在浏览网页时，当鼠标悬停在某个链接或元素上时，会弹出一个包含相关信息的小窗口，类似于腾讯的“网眼”...
标题中的“几行jquery代码搞定网页右下角向左弹出提示层”指的是使用jQuery库实现的一种网页交互效果。jQuery是一种轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在这个项目中，...
本项目“js模仿腾讯世界杯人物介绍弹出提示层”旨在教你如何使用JavaScript来创建一个类似腾讯世界杯人物介绍的弹出提示层。这个功能在网页上可以用于展示运动员资料、比赛亮点或其他相关信息。 首先，我们要了解...
显示弹出提示层，定时隐藏；背景颜色可以自定义，显示文本自定义；