`
abei1
  • 浏览: 21043 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

利用AJAX实现 web页面的模式对话框

    博客分类:
  • Ajax
阅读更多
模式对话框是,当弹出对话框时后面的内容无法操作。本次利用ajax制作的模式对话框并不是浏览器提供的模式对话框,而是通过层和ajax技术实现的虚拟的模式对话框。

首先是样式表
css 代码
css 代码
  1.   
  2. .abc{   
  3.       position:absolute;   
  4.       left:1px;   
  5.       top:1px;   
  6.       width:1024px;   
  7.       height:768px;   
  8.       z-index:0;   
  9.       background-repeatrepeat;   
  10.       background-color:white;   
  11.       FILTER: alpha(opacity=60);    
  12.       opacity: 0.6;   
  13.          
  14.          
  15.    }   
  16.       
  17.    .start{   
  18.    }   
  19.       
  20.    .abc1 {   
  21.       position:absolute;   
  22.       left:350px;   
  23.       top:240px;   
  24.       width:300px;   
  25.       height:100px;   
  26.       z-index:0;   
  27.    }   
然后是脚本
js 代码
  1. var xmlHttp;   
  2.   
  3.     function createXMLHttpRequest() {   
  4.             if (window.ActiveXObject) {   
  5.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  6.             }    
  7.         else if (window.XMLHttpRequest) {   
  8.             xmlHttp = new XMLHttpRequest();   
  9.         }   
  10.     }   
  11.   
  12. function forget(){   
  13.   
  14.     createXMLHttpRequest();   
  15.        
  16.     var queryString = "tryAjaxAction.do?";   
  17.     queryString = queryString + createString()   
  18.       + "&timeStamp=" + new Date().getTime();   
  19.     xmlHttp.onreadystatechange = doForget;   
  20.     xmlHttp.open("GET""forget.jsp""true");   
  21.     xmlHttp.send(null);   
  22.         
  23. }   
  24.   
  25. function doForget(){   
  26.     if(xmlHttp.readyState == 4) {   
  27.         if(xmlHttp.status == 200) {   
  28.          var layer = document.getElementById("Layer1");   
  29.          layer.className = "abc";   
  30.          var layer2 = document.getElementById("Layer2");   
  31.          layer2.className = "abc1";   
  32.          layer2.innerHTML = xmlHttp.responseText;   
  33.         }    
  34.    }   
  35. }  
页面内容
xml 代码
  1. <table width="100%" height="587"  border="0">  
  2.   <tr>  
  3.     <td height="138" colspan="3">    
  4.     <div id="Layer1">  
  5.         
  6.     div>  
  7.      <div id="Layer2">  
  8.       div>  
  9.     td>  
  10.   tr>  
  11.   <tr>  
  12.     <td width="10%" height="137"><div align="center"> div>td>  
  13.     <td width="77%"><div class="img_border"><img class="img_border" src="web/images/first_bg.jpg" width="740" height="135" border=0>div>td>  
  14.     <td width="13%"> td>  
  15.   tr>  
  16.   <tr>  
  17.     <td height="28"> td>  
  18.     <td height="28"><html:form method="POST" action="/tryAjaxAction">  
  19.     <input type="hidden" name="method" />  
  20.     <div id="serverResponse">  
  21.        
  22.     div>    
  23.         <div align="center">  
  24.             <SPAN class=col777777><bean:message key="userName">bean:message>SPAN>  
  25.             <html:text name="loginForm" property="email">html:text>  
  26.             <SPAN class=col777777><bean:message key="password">bean:message>SPAN>  
  27.             <html:password name="loginForm" property="password">html:password>  
  28.             <html:button property="button" value="提交" onclick="test()">html:button>  
  29.                    
  30.             <a class="ab" href="#"><bean:message key="regist">bean:message>a>|<a class="ab" onClick="forget()" href="#"><bean:message key="forgetPassword">bean:message>a>  
  31.             
  32.        div>  
  33.     html:form>  
  34.         
  35.        
  36.     td>  
  37.     <td height="28"> td>  
  38.   tr>  
  39.   <tr>  
  40.     <td height="80" colspan="3"> td>  
  41.   tr>  
  42.   <tr>  
  43.     <td height="162" colspan="3"> td>  
  44.   tr>       
  45. table>  
分享到:
评论
2 楼 hgq0011 2006-12-15  
daoger 写道
挺好!给个良好!
这个也挺好啊!
http://prototype-window.xilinus.com/samples.html#

我用了它一个“提示信息”的窗口,它会对我写的css,html有一些影响。比如,我的页面中有两个下拉框,等到它弹出来的时候,那个下拉框就消失了;当它消失那个下拉框就出来了。但是我把一个下拉框的选值传递到另一个时,接受值的下拉框就消失了。似乎它会把这些下拉框的display属性设置成none。不知道为什么,没有深入的研究,
1 楼 daoger 2006-12-15  
挺好!给个良好!
这个也挺好啊!
http://prototype-window.xilinus.com/samples.html#

相关推荐

    一个基于ajax技术实现的模式窗体对话框文件上传控件

    在这个特定的场景中,"一个基于ajax技术实现的模式窗体对话框文件上传控件" 是一种交互式的UI组件,它结合了Ajax和C#编程语言来构建,旨在提高用户在上传文件时的交互性和效率。 首先,我们要理解这个控件是如何...

    模式对话框调页面

    这篇博客“模式对话框调页面”可能是探讨如何在编程中实现这种功能,特别是如何将模式对话框与页面的其他部分进行交互。 首先,我们要理解模式对话框的基本概念。在Web开发中,通常使用JavaScript库如jQuery UI或...

    Jquery+CSS模式对话框

    在Web开发中,模式对话框(Modal Dialog)是一种常见的用户交互元素,用于在当前页面上显示一个半透明的遮罩层,焦点集中在一个独立的窗口,用户必须先处理这个对话框才能继续与主页面进行交互。这种设计可以有效地...

    ASP.Net中的模式对话框

    在ASP.NET中,我们可以使用多种方式实现模式对话框,如JavaScript库(如jQuery UI)、ASP.NET AJAX Control Toolkit以及内置的Web部件。 1. **JavaScript和jQuery UI**:通过引入jQuery库和jQuery UI,我们可以利用...

    JQuery 全屏覆盖源码以及模式对话框

    本话题将深入探讨如何利用 jQuery 实现全屏覆盖(Full-Screen Overlay)以及模式对话框(Modal Dialogs)的功能,这些功能在现代网页设计中十分常见,例如用于显示警告信息、用户登录、内容预览等场景。 全屏覆盖...

    利用模态对话框实现父窗体、子窗体间传值

    总结来说,利用模态对话框实现父窗体与子窗体间的数据传递是一种常见的Web交互设计模式。虽然`showModalDialog`在某些浏览器中已被废弃,但通过理解其工作原理,我们可以找到替代方案,如HTML5的`&lt;dialog&gt;`元素或...

    Ajax设计模式,The Ajax Technologies

    综上所述,Ajax设计模式是构建现代Web应用的重要组成部分,它们提供了一套有效的方法来利用Ajax技术的优势,创造更高效、更互动的用户体验。了解和掌握这些模式,有助于开发出更加优秀的Web应用程序。

    jQuery实现扁平化风格的对话框插件Dialogbox源码.zip

    通过对Dialogbox源码的学习和理解,开发者不仅可以掌握如何创建一个基本的对话框插件,还能进一步了解jQuery插件的开发模式,以及如何利用jQuery与其他技术(如CSS3、Ajax)结合,实现更复杂的交互效果。这将对提升...

    Ajax 改造第 1 部分使用 Ajax 和 jQuery 改进现有站点

    总的来说,这篇文章教给读者如何利用Ajax和jQuery来改进现有网站,特别是通过模式对话框提高用户体验和简化导航,同时遵循渐进增强的原则,确保网站的可访问性和兼容性。对于开发者而言,这是一个实用的指南,帮助...

    MVC4 JQuery Mobile建立对话框的专业实践.

    - 利用 AJAX 进行异步更新,减少页面刷新,提升用户体验。 - 通过缓存和重用对话框实例,减少服务器负载。 - 适配不同屏幕尺寸,确保对话框在各种设备上的显示效果。 总结,结合MVC4和JQuery Mobile创建对话框,...

    BootstrapModalDialog:使用 Bootstrap 模态对话框和 AJAX 的 Play 1.2.7 示例

    BootstrapModalDialog 是一个基于 Play 1.2.7 框架和 Bootstrap UI 库的示例项目,展示了如何在 Web 应用程序中利用模态对话框进行 AJAX 交互。Bootstrap 是一个流行的前端开发框架,它提供了丰富的 UI 组件,包括...

    AJAX+JSF制作7个特效

    本篇文章将详细探讨如何利用AJAX与JSF相结合,来制作7个具有吸引力的特效。 1. 实时数据验证: 利用AJAX,开发者可以在用户输入时进行实时验证,无需等待整个表单提交。JSF提供了丰富的组件库,如`&lt;h:inputText&gt;`...

    三层+EasyUI+Ajax

    当用户在EasyUI创建的表单中填写信息后,利用Ajax技术可以将表单数据异步发送到服务器,无需等待整个页面刷新,从而提供流畅的交互体验。同时,服务器端接收到数据后在业务逻辑层进行处理,并可能更新数据库(数据...

    ASP.NET的模式搜索和选择项对话框

    在描述中提到的"具有项目选择功能的Ajax搜索模式对话框",进一步细化了这个主题。Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术,通过在后台与服务器异步交换数据并局部更新页面,而无需...

    具有动态内容的jQuery模式对话框

    例如,创建一个ASP.NET Web API接口,该接口返回JSON或其他格式的数据,然后在客户端的Ajax请求中解析这些数据并显示在对话框中。 在CSS方面,jQuery UI提供了丰富的主题,你可以通过调整主题或自定义CSS来满足特定...

    各种Ajax UI 很多很漂亮的代码

    Ajax(Asynchronous JavaScript and...总之,这个压缩包提供了一个丰富的资源库,展示了如何利用Ajax技术构建美观且功能强大的用户界面。无论是初学者还是经验丰富的开发者,都能从中受益,提升自己的Web应用开发技能。

    jQuery移动Web开发(第二版).zip

    jQuery Mobile通过AJAX技术实现了页面的平滑切换,减少了页面加载时间和用户感知的延迟。但需要注意的是,过度依赖AJAX可能会导致SEO问题,因为搜索引擎可能无法抓取到AJAX加载的内容。为解决这个问题,可以使用...

    使用_jQuery_生成丰富用户界面.pdf

    本文将探讨如何利用jQuery UI库来实现模式和无模式对话框,以及如何从这些对话框向Web服务器提交数据。 #### 二、jQuery UI库概述 jQuery UI库是一个基于jQuery的扩展库,提供了一系列的用户界面组件和交互效果,...

    模式窗体页面传值关于自定义控件与页面之间的传值

    在ASP.NET中,这可能通过弹出一个JavaScript或AJAX的对话框来实现,而在WinForms中则可以创建一个具有Modal属性的Form实例。 2. **自定义控件(Custom Control)**:自定义控件是扩展.NET Framework提供的基础控件...

    Ajax使用工具包(.net的工具包)

    在.NET框架下,开发人员可以利用各种Ajax工具包来提升Web应用程序的交互性和用户体验。本文将深入探讨.NET环境下常用的Ajax使用工具包及其优势。 1. **ASP.NET AJAX Framework**:这是微软官方提供的一个强大的Ajax...

Global site tag (gtag.js) - Google Analytics