现在网页上很流行的一种技术是用AJAX +JS 实现的么

一aa一 2011-01-23 08:52:44

效果如图：

大体的思路是怎么样的？

...全文

69 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

一aa一 2011-01-23

打赏
举报

回复

<script language="javascript"> 

//登陆弹出对话框，并使背景元素不可用

var div_width = 300;

var div_height = 200;

function showWindow(width,height){ 

location.href="#";

width = div_width;

height = div_height

var windowstr= document.getElementById("popLayer").innerHTML;

document.getElementById("infoDiv").innerHTML=windowstr; 

document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px"; 

document.getElementById("infoDiv").style.top=200+"px"; 

document.getElementById("infoDiv").style.zIndex=10001;

document.getElementById("infoDiv").style.width=width; 

document.getElementById("infoDiv").style.height=height; 

document.getElementById("infoDiv").style.border="3px solid #0099ff";

document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px"; 

document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px"; 

document.getElementById("tranDiv").style.display=""; 

document.getElementById("tranDivBack").style.display=""; 

document.getElementById("tranDivBack").style.zIndex=10000;

document.getElementById("infoDiv").style.display=""; 

} 

function closeWindow(){ 

document.getElementById("tranDiv").style.display="none"; 

} 



</script> 





页面中：

<!--层遮罩部分-->

<div style="position:absolute;display:none; left:0px; top:0px;" id="tranDiv">

<div style="position:absolute;left:0px; top:0px; width:100%; height:100%;background-color:#000000;filter:alpha(Opacity=30)" id="tranDivBack"> </div> 

<div align='center'style='position:absolute;left:0px; top:0px; width:100%; height:100%; background-color:#e5edf5;background-image:url(images/bestnetqywimg/tccbg.gif);'  id='infoDiv'></div> 

</div> 

<!--层遮罩部分结束-->

<!--弹出层登录-->

<div id="popLayer" style="display:none"><form id="formdl" name="formdl" method="post" action=""><br /><font align="center" color="#0000ff" size="3"><b>---手机号码先登录---</b><span onClick="closeWindow()">关闭</span></font><br /><br />



  <br/>

  <input type="submit" name="Submit" class="bntccanniu" value="登录" /> <input type="button" name="Submit1" class="bntccanniu" value="取消" onclick="closeWindow();"/>

  

</form>

</div> 

<a href="#" onClick="showWindow()">点击此处看看</a>

一aa一 2011-01-23

打赏
举报

回复

<script language="javascript">
//登陆弹出对话框，并使背景元素不可用
var div_width = 300;
var div_height = 200;
function showWindow(width,height){
location.href="#";
width = div_width;
height = div_height
var windowstr= document.getElementById("popLayer").innerHTML;
document.getElementById("infoDiv").innerHTML=windowstr;
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=200+"px";
document.getElementById("infoDiv").style.zIndex=10001;
document.getElementById("infoDiv").style.width=width;
document.getElementById("infoDiv").style.height=height;
document.getElementById("infoDiv").style.border="3px solid #0099ff";
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
document.getElementById("tranDiv").style.display="";
document.getElementById("tranDivBack").style.display="";
document.getElementById("tranDivBack").style.zIndex=10000;
document.getElementById("infoDiv").style.display="";
}
function closeWindow(){
document.getElementById("tranDiv").style.display="none";
}

</script>

页面中：

<div style="position:absolute;display:none; left:0px; top:0px;" id="tranDiv">
<div style="position:absolute;left:0px; top:0px; width:100%; height:100%;background-color:#000000;filter:alpha(Opacity=30)" id="tranDivBack"> </div>
<div align='center'style='position:absolute;left:0px; top:0px; width:100%; height:100%; background-color:#e5edf5;background-image:url(images/bestnetqywimg/tccbg.gif);' id='infoDiv'></div>
</div>


<div id="popLayer" style="display:none"><form id="formdl" name="formdl" method="post" action=""><br /><font align="center" color="#0000ff" size="3"><b>---手机号码先登录---</b><span onClick="closeWindow()">关闭</span></font><br /><br />

<br/>
<input type="submit" name="Submit" class="bntccanniu" value="登录" /> <input type="button" name="Submit1" class="bntccanniu" value="取消" onclick="closeWindow();"/>

</form>
</div>
<a href="#" onClick="showWindow()">点击此处看看</a>

qiyuedexue 2011-01-23

打赏
举报

回复

http://zhidao.baidu.com/question/186994737.html?si=2

一aa一 2011-01-23

打赏
举报

回复

hi.baidu.com/%D2%BB%B2%BD%C8%FD%B8%F6%BD%C5%D3%A1/album/item/f26cb3cfa6492769b700c817.html#
这地址

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

ajax （ajax开发） AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。现在一般网站都是用ajax来实现页面无刷新操作的。什么是无刷新：ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。下面给大家介绍JS实现AJAX局部刷新功能，具体内容如下所示：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 // 创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); //

本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考，具体如下： 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。 2.AJAX在原生JS中的实现尽管随着JS框架的盛行，在jQuery中，实现AJAX过程相当简单，但是对于

AJAX简单介绍： AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），是指一种创建交互式网页应用的网页开发技术。通过 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您JavaScript 可在不重载页面的情况与 Web 服务器交换数据。 jQuery是一种javascript框架，是对javascript的一种轻量级的封装，容易理解。 Ajax是一种由xml+javascript组合起来的一种异步请求技术.可实现动态刷新。 ajax准备

28,390

社区成员

357,068

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章