模拟一个弹出消息框，有模式。核心接口是open，即弹出消息框，此方法有三个参数，分别代表消息框的标题，需要显示的内容，客户端提供的其他参数(参数间用分号隔开)。
以下是代码，附件是Demo。
/**
* 用层来模拟的消息框，有模式
*/
function DivAlert(){
var _jpanel=new Panel();
var _panelNode=_jpanel.getNode();
var _bShow=false; //显示提示框的标志
var _bInModel=false; //当前是否处于模式状态
var _model=null; // 产出模式的层
var _dragIns=null; //拖动类对象
var _params=null; //客户端提供的参数
var _modelDom=null; //模式层对象
var _table="<table cellpadding=3 cellspacing=0 style='border-width:1px;border-style:solid;border-color:#eeeeee;background-color:white;width:400px;height:auto;border:1px;background-image:url('bg.gif');background-repeat:repeat-x;'><tr><td style='background-color:#F8F8FF'></td><td style='background-color:#F8F8FF' align='right'><img style='cursor:hand' src='clo.jpg' title='关闭'></td></tr><tr><td style='padding-top:5px' colSpan=2><TABLE cellspacing=0 cellpadding=3><tr><td style='padding-left:3px;'><img align='absmiddle' src='warn.jpg' border=0></td><td noWrap=true></td></tr><tr><td> </td></tr></TABLE></td></tr><tr><td align=center style='padding-bottom:10px'><button>确定</button> <button>取消</button></td></tr></table>"
_panelNode.innerHTML=_table;
var _domBar=_panelNode.children[0].rows[0] ; //标题栏
var _domTableContainer=_panelNode.children[0].rows[1].cells[0].children[0];
var _domContent=_domTableContainer.rows[0].cells[1]; //需要显示的内容
var _domBtn=_panelNode.children[0].rows[2].cells[0].children[0]; //确定按钮
var _domClose=_domBar.cells[1].children[0]; //关闭按钮
var _domCancel=_panelNode.children[0].rows[2].cells[0].children[1]; //取消按钮
_domClose.onclick=close; //关闭层
_domBtn.onclick=click; //确定按钮事件
_domCancel.onclick=close; //取消按钮事件
function click(){
_jpanel.setVis(false);
if(_bInModel){
if(_modelDom!=null){
_modelDom.style.display="none";
}
}
//执行自定义的确定动作，由客户端提供
if(typeof(window.confirmFct)!="undefined"){
window.confirmFct();
}
_bInModel=false;
}
//打开提示框
this.open=function open($title,$content,$params){
_params=parseParams($params);
_panelNode.style.left=document.body.clientWidth/2-120;
_panelNode.style.top=document.body.clientHeight/2-150;
_domTableContainer.style.height="auto";
_domTableContainer.style.width="200px";
setTitle($title);
setModel(); //设置模式
_panelNode.style.zIndex=_modelDom.style.zIndex+1;
_jpanel.setVis(true);
setContent($content);
_domBar.style.cursor="hand";
try{
//在这里增加拖动
//_dragIns = new 拖动类(); TODO
}catch(e){
alert(e.description);
}
_bShow=true;
};
//关闭提示框
this.close=function close(){
_jpanel.setVis(false);
if(_bInModel){
if(_modelDom!=null){
_modelDom.style.display="none";
}
}
_bInModel=false;
};
//设置提示框的标题
this.setTitle=function setTitle($title){
_domBar.cells[0].style.fontSize="12px";
_domBar.cells[0].style.fontWeight="bold";
_domBar.cells[0].innerText=$title;
}
//设置提示框需要显示的内容
this.setContent=function setContent($content){
if(_params['nowrap']!=null){ //提供的内容要求换行
var reg = new RegExp(";","g");
$content=$content.replace(reg,"<br>");
}
_domContent.innerText=$content;
}
//判断提示框是否打开
this.isOpen=function(){
return _panelNode.style.visiblity=="visible";
}
this.getNode=function(){
return _panelNode;
}
//为body设置模式
this.setModel=function setModel(){
if(_model==null){
_model="<div style='background-color:#ddd;z-index:1000;display:none;position:absolute;filter:Alpha(opacity:50);top:0;left:0;float:left;' id='bodyModel'></div>";
}
document.body.insertAdjacentHTML("beforeEnd",_model);
if(_modelDom==null){
_modelDom=document.getElementById("bodyModel");
}
fixModelLayer();
_modelDom.style.display="";
_bInModel=true;
}
this.getModelDom=function(){
if(_modelDom!=null){
return _modelDom;
}
}
//修正层的大小
this.fixModelLayer=function fixModelLayer(){
if(_modelDom==null){
return;
}
if(document.body.scrollLeft>0){
_modelDom.style.width=window.screen.availWidth + document.body.scrollLeft+ "px";
}else{
_modelDom.style.width=document.body.clientWidth+ "px";
}
if(document.body.scrollTop>0){
_modelDom.style.height=window.screen.availHeight + document.body.scrollTop+ "px";
}else{
_modelDom.style.height=document.body.clientHeight+ "px";
}
}
//层移动时同时改变模式的大小
this.changeModelPos=function changeModelPos(){
if(_modelDom==null){
return;
}
var st=document.body.scrollTop;
var sw=document.body.scrollLeft;
if(st!=0){
_modelDom.style.height=document.body.clientHeight + st + "px";
}else{
_modelDom.style.height=document.body.clientHeight + "px";
}
if(sw!=0){
_modelDom.style.width=document.body.clientWidth + sw + "px";
}else{
_modelDom.style.height=document.body.clientWidth + "px";
}
}
}
var _divAlert = new DivAlert();
//拖动提示框的同时调整模式层的大小
function withDrag(){
_divAlert.changeModelPos();
}
//产生一个外围面板
function Panel(){
var _sHtml = "<div style='position:absolute; left:2px; top:2px;z-index:199;color:black;visibility:hidden'></div>";
var _node = createSpanHTML(_sHtml);
document.body.insertAdjacentElement("beforeEnd", _node);
//get insert node
this.getNode = function() {
return _node;
};
// show or hide the layer
this.setVis = function($bType) {
_node.style.visibility = $bType?"visible":"hidden";
_node.style.display = $bType?"":"none";
};
}
function createSpanHTML($html){
var node = document.createElement("SPAN");
node.innerHTML = $html;
return node.children[0];
}
//解析由分号分隔的参数，格式如nowrap=true;height=100;width=100
function parseParams($params){
var reg = /([^\=\;]*)\=([^\;]*)/gi;
var rt = [];
if ($params==null)
return rt;
var ar = $params.match(reg);
var t = null;
for (var i=0; i<ar.length; i++) {
t = ar[i].split("=");
if (t[1].toUpperCase()=="TRUE") {
rt[t[0]] = true;
}else {
rt[t[0]] = t[1];
}
}
return rt;
}
程序中拖动层的方法还没提供。用IE调试通过，没试过其他浏览器。
必须注意的一点是，在Demo中，调用接口open的代码必须在</body>之后，否则会有document.body不是对象的bug，不知道是不是IE的问题，我调试用IE7。
另外，创建模式的层的大小必须随着提示框的位置而变化（如果提示框被拉出当前窗口之外，即出现垂直或者水平滚动条），这里解决这个问题的思路是，在拖动层的onmouseup的事件函数中同时调用一个函数（以上提供了原型withDrag），这个函数会同时改变模式层的大小。
分享到：
相关推荐
标题和描述中提到的"asp.net弹出消息框 类似msn的消息框"实际上是在指如何在网页上创建一个模仿MSN消息框效果的通知系统。这个系统通常具备简洁的设计、可定制的样式以及能够快速通知用户关键信息的能力。 在ASP...
在C#编程中，模拟QQ弹出消息框是一项常见的需求，尤其在开发具有用户交互性的桌面应用程序时。本文将详细讲解如何使用C#实现一个类似于QQ的弹出消息框，包括窗体的动画效果，如向上弹出、向下降落以及渐变透明消失。...
"Delphi 程序出错时的弹出消息框仿真.rar" 文件就是这样一个例子，它提供了一种方式来模拟和重现这种自定义错误消息框的展示效果。 在 Delphi 中，我们可以利用 VCL（Visual Component Library）组件库中的各种控件...
在C# Web应用程序中弹出消息框是一种常见的交互方式，用于向用户显示警告、确认信息或者简单的提示。在ASP.NET框架下，由于Web应用程序的异步性质，直接使用Windows Forms中的MessageBox并不适用，因为Web应用运行在...
4. **数据库交互**：为了在适当的时间弹出消息，需要从数据库获取信息。这涉及后端编程，如PHP、Python、Node.js等，以及数据库操作，包括SQL查询。你需要了解如何设置数据库连接、执行查询、获取数据并将其传递到...
在描述中提到的"使用TaskbarNotifier，用多线程一次弹出多个消息框"，表明我们将使用TaskbarNotifier类来实现这一功能，并通过多线程技术确保同时可以显示多个消息。 TaskbarNotifier通常是一个自定义控件或者第三...
总的来说，ASP.NET C# Web应用中弹出消息框的方式多样，具体选择哪种取决于你的需求和项目的技术栈。JavaScript和CSS是最基础的，而Bootstrap模态框、Ajax和SignalR则为更高级的解决方案，提供更丰富的交互体验。在...
JavaScript弹出框组件的核心在于模拟原生的alert(), confirm() 和 prompt()函数，但提供更多的自定义选项。这些组件通常由HTML结构、CSS样式和JavaScript逻辑三部分组成。HTML负责构建弹出框的布局和元素，CSS用于...
同时，我们还监听了页面加载事件，在页面加载完成后延迟2秒移除`hidden`类，模拟弹出框从右下角渐显的效果。 这些实例中提供的代码应该都是静态的，可以直接在HTML文件中运行，无需额外的服务器支持。你可以根据...
本项目"**MFC仿QQ弹出消息**"的目标是模仿腾讯QQ的弹窗通知功能，这种功能在日常使用中常见于即时通讯软件，用于提醒用户接收新消息或其他重要事件。 首先，我们来看看如何在MFC应用中创建一个Tray Icon，即任务栏...
在AngularJS中，弹出框（也称为提示框或 toast）是用户界面中常见的交互元素，用于显示警告、信息或确认消息。这个“angularjs 弹出框，源码扩展”主题聚焦于如何通过源码扩展来实现更灵活的弹出框功能，包括自定义...
JavaScript弹出框架的核心是通过JavaScript代码创建新的窗口或者覆盖原有内容来模拟传统浏览器的`window.open()`函数。这种框架通常包含以下特点： 1. **自定义样式**：可以定制弹出窗口的外观，包括边框、背景、...
// 首次弹出消息 showQQMessage('测试消息'); // 每隔10秒再次弹出 setInterval(function() { showQQMessage('又来一条消息'); }, 10000); ``` 这段代码创建了一个模拟的QQ消息弹出框，并在首次运行后每隔10秒...
本篇文章将深入探讨如何使用JS模拟Android系统的弹出提示框，实现更友好的交互设计。 首先，我们需要了解`alert()`的基本用法。`alert()`是JavaScript中的一个全局函数，用于显示一个带有可选消息和OK按钮的警告...
winPos：弹出窗口的位置，支持8种内置位置（c,l,t,r,b,lt,rt,lb,rb）及自定义窗口坐标,默认为c。 各参数意义：c:页面中间,l:页面左侧,t:页面顶部,r:页面右侧,b:页面顶部,lt:左上角,rt:右上角,lb:左下角,rb:右下角 ...
标题中的“弹出信息框”通常指的是在网页中显示一种临时的、浮动的提示信息，这种功能在网页设计和开发中十分常见。信息框可以用来显示警告、确认、提示等消息，用户可以在不离开当前页面的情况下接收信息或进行交互...
根据给定的信息，本文将详细解释如何通过JavaScript创建一个类似于QQ登录成功后右下角弹出的消息提示框。此功能不仅增加了用户体验，还为应用程序添加了动态反馈元素。接下来，我们将深入探讨该脚本的工作原理、关键...
在IT行业中，模拟弹出窗口是一种常见的用户界面交互技术，特别是在网页开发、桌面应用程序和移动应用设计中。这种技术能够提供非阻塞式的用户交互体验，允许用户在不离开当前页面或界面的情况下处理额外的信息或者...
模拟弹出式对话框通常涉及到以下几个关键点： 1. **UI设计**：这包括对话框的外观和感觉，如边框、按钮、文字输入框等元素的设计。对话框应具有与原版MSN相似的布局和样式，以提供一致的用户体验。 2. **事件处理*...