`
liss
  • 浏览: 842708 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ajax dialog

    博客分类：
  • Ajax
AjaxJavaScriptSafariASPFirefox 
阅读更多

<html><head><title>弹出式Ajax消息发发送窗口</title>
<style>
.msgbox{ z-index:1101;}
.msgbox,#sendmsg{width:600px;}
.msgbox .head{ width:600px;border:1px solid #00CCFF; height:24px; text-align:center; font-weight:bold; font-size:12px;
background:#0066CC; height:28px; cursor:default; color:white;}
.msgbox .head #c{font-weight:normal;}
.msgbox .bdy table{width:600px;}
.msgbox .bdy{width:600px;border:1px solid #00CCFF; border-top:0; background:white;font-size:12px}
.msgbox .bdy td{padding:5px;}
.msgbox .bdy p{padding:2px; margin:0px; font-weight:bold}
.msgbox .bdy .tarea{ width:570px;}
.msgbox .bdy .sp{ height:14px; overflow:hidden; vertical-align:middle;}
.msgbox #msgbtn{width:60px;}
.msgbox_bg{ position:absolute; top:0; left:0;filter:Alpha(opacity=20); width:100%; height:100%; z-index:1100; background:#999999;}
</style>
<script>
var MsgNoteS = null;
var MsgBox =null;
var MsgSmoothi=0;
var MsgSmoothTimer=0;

/*如果不在Body中加入Div就在Body后加入如下代码*/
/*窗体
var oDiv=document.createElement('div');
oDiv.id='sendmsg';
oDiv.className='msgbox';
oDiv.style.display="none";
document.body.appendChild(oDiv);*/

/*背景
var oBgDiv=document.createElement('div');
oBgDiv.id='sendmsgBg';
oBgDiv.className='msgbox_bg';
oBgDiv.style.display="none";
document.body.appendChild(oBgDiv);*/
/*如果不在Body中加入Div就在Body后加入如上代码*/

function CreatNewMsg(divid,uname,toname,title,content)
{
/*
传参数时用“&quot;”代替" 用“\'”代替 '
如果content为空，认为是回复
*/
var Msgbody =
"<table width='100%' border='0' cellspacing='0' cellpadding='0' class='head'>" +
"<tr class='t2'><td valign='middle' onMouseDown=\"javascript:MsgmoveStart(event,'sendmsg');\">发送短消息</td>" +
"<td width='40' valign='middle' id='c' onclick='CloseMsg()'>关闭</td></tr></table>" +

"<table width='100%' border='0' cellspacing='1' cellpadding='0' class='bdy'><tr><td align='left' valign='top'>" +
"<p>标　题:&nbsp;<input type='text' name='MsgSubject' style='width:400px;'></p>" +
"<p>发信人:&nbsp;<input type='text' name='MsgSender'></p>" +
"<p>收信人:&nbsp;<input type='text' name='MsgReceiver'></p>" +
"<p>消息内容:</p>      " +
"<p><textarea name='MsgContent' cols='80' rows='8' class='tarea'></textarea></p>" +
"<div align='right'>" +
"<span id='"+divid+"S' class='sp'>准备发送消息...</span>&nbsp;" +
"<input type='button' id='msgbtn' value=' 发送 ' onClick='AjaxSendMsg()' />" +
"<input type='button' id='msgbtn' value=' 返回 ' onClick='CloseMsg()' />" +
"</div></td></tr></table>";

MsgBox = document.getElementById(divid);
MsgBox.innerHTML = Msgbody;

MsgNoteS = document.getElementById(divid+"S");

document.getElementById("MsgSender").value=uname;
document.getElementById("MsgReceiver").value=toname;
document.getElementById("MsgSubject").value=title;

if(content !="")
    document.getElementById("MsgContent").value="\r\n\r\n-----------------\r\n"+content;

MsgBox.style.position = "absolute";
MsgBox.style.left = (document.body.clientWidth-600)/2 + "px";
MsgBox.style.top = 80 + "px";
MsgBox.style.filter="Alpha(opacity=5);";
MsgBox.style.display = "block";
document.getElementById("sendmsgBg").style.display="block";
document.getElementById("MsgContent").focus();
MsgSmoothi=0;
MsgSmoothTimer=setInterval("showMsgBoxSmooth()",3);
}
function showMsgBoxSmooth()
{
MsgBox.style.filter="Alpha(opacity="+MsgSmoothi+");";
MsgSmoothi+=30;
if(MsgSmoothi >= 90)
{
    MsgBox.style.filter="Alpha(opacity=90);";
    clearInterval(MsgSmoothTimer);
}
}
/*Ajax Send Msg*/
/*Ajax对象*/
function GetXmlHttpObject()
{
var xmlHttp=null;
try{xmlHttp=new XMLHttpRequest();}/* Firefox, Opera 8.0+, Safari*/
catch (e){
    try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }/* Internet Explorer*/
    catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
    }
return xmlHttp;
}
function AjaxSendMsg()
{
var checki = 0;
var sender = document.getElementById("MsgSender").value;
var receiver = document.getElementById("MsgReceiver").value;
var content =document.getElementById("MsgContent").value;
var subject =document.getElementById("MsgSubject").value;

content = content.replace(/\r\n/ig,"_br /_");/*C#中对"_br /_"替换为<br />*/

MsgNoteS.innerHTML ="";

/*验证用户输入*/
if(sender.length ==0)
{
    MsgNoteS.innerHTML="没有输入发送人.";
    checki++;
}
if(receiver.length == 0)
{
    MsgNoteS.innerHTML=MsgNoteS.innerHTML+"没有输入接收人.";
    checki++;
}

if (content.length==0)
{
    MsgNoteS.innerHTML=MsgNoteS.innerHTML+"没有输入内容.";
    checki++;
}
if(sender.length>0 && sender == receiver)
{
    MsgNoteS.innerHTML=MsgNoteS.innerHTML+"<span style=\"color:#aa0000\">您不能给自己发消息</span>.";
    checki++;
}

if(checki>0) return;

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
    {
    MsgNoteS.innerHTML="您的浏览器不支持AJAX,请更换浏览器后再试";
    return;
    }

var url="sendmsg.aspx?s="+sender;
url=url+"&r="+receiver;
url=url+"&c="+content;
url=url+"&subject="+subject;
url=url+"&none="+Math.random();

/*测试代码,使用时删除*/
url="http://www.w3school.com.cn/ajax/gethint.asp";
url=url+"?q="+sender;
url=url+"&sid="+Math.random();
/*测试代码,使用时删除 end*/

xmlHttp.onreadystatechange=MsgStateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
MsgNoteS.innerHTML="正在提交.请稍候...";
}
function MsgStateChanged()
{
if (xmlHttp.readyState==4)
{
      var rtext =xmlHttp.responseText.toString();
      MsgNoteS.innerHTML=rtext;
      if(rtext.search("消息发送成功") != -1 )
         {
            window.setTimeout("CloseMsg()",500);
         }
      else
        {
        }
/*测试代码,使用时删除*/
      if(rtext.search("suggestion") != -1 )
         {
            window.setTimeout("CloseMsg()",500);
         }
      else
        {
        }
/*测试代码,使用时删除 end*/
}
}
/*Ajax Send Msg end*/
/*消息窗口关闭*/
function CloseMsg()
{
MsgBox.style.display="none";
document.body.style.filter="";
document.getElementById("sendmsgBg").style.display="none";
}
/*消息窗口拖动*/
function MsgmoveStart (event, _sId){
   var oObj = document.getElementById(_sId);
   oObj.onmousemove = MsgMouseMove;
   oObj.onmouseup = MsgMouseUp;
   oObj.setCapture ? oObj.setCapture() : function(){};
   oEvent = window.event ? window.event : event;
   var dragData = {x : oEvent.clientX, y : oEvent.clientY};
   var backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
  
function MsgMouseMove(){
    var oEvent = window.event ? window.event : event;
    var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
    var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
    oObj.style.left = iLeft;
    oObj.style.top = iTop;
    dragData = {x: oEvent.clientX, y: oEvent.clientY};
   }
  
function MsgMouseUp(){
    var oEvent = window.event ? window.event : event;
    oObj.onmousemove = null;
    oObj.onmouseup = null;
    if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
    oObj.style.left = backData.y;
    oObj.style.top = backData.x;
     }
     oObj.releaseCapture ? oObj.releaseCapture() : function(){};
   }
}
/*消息窗口拖动 end*/

</script>
</head>

<body style="height:800px; text-align:center">
<div id="sendmsg" class="msgbox" style="display:none"></div>
<div id="sendmsgBg" class="msgbox_bg" style="display:none"></div>

<a href="javascript:CreatNewMsg('sendmsg','admin','fff','ajax\'短消息标题','ajax短&quot;消息内\'容')">
新建短消息</a><br />1<br />2<br />3<br />4<br />5<br />6<br />7

</body>
</html>

分享到：
| 让ajax中实现提示框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax dialog

    用ajax+javascript做的一个小项目,希望对有用的人有帮助!

    Ajax Model Dialog

    Ajax Model Dialog 提供了一种高效、灵活的方式，用于在网页上弹出含有动态内容的对话框。 ### 1. Ajax 技术 Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页内容的...

    jquery ui中的dialog

    Dialog还支持其他功能，如自动定位（autoPosition）、按钮（buttons）和内容加载（ajax内容）。例如，可以添加确认按钮： ```javascript $("#dialog").dialog({ buttons: { "确认": function() { $(this)....

    jquery ui dialog 扩展

    在`jquery-ui-ajax-dialog.js`中，我们可以看到Dialog与Ajax的结合。Ajax允许我们在不刷新页面的情况下从服务器获取数据，这对于创建动态、响应式的Dialog非常有用。通过设置Dialog的open事件，我们可以加载远程数据...

    JQuery Dialog

    - **异步加载内容**：利用Ajax，Dialog可以动态加载远程内容，实现动态对话框。 - **多窗口交互**：多个Dialog可以同时存在，通过事件监听，实现它们之间的交互。 ### 9. 示例代码 在实际应用中，可能需要结合具体...

    最土团购模板导航

    AJAX 对话框 (Ajax Dialog) 这部分提供了通过AJAX技术实现的动态交互对话框，包括： - `ajax_dialog_coupon.html`: 优惠券验证对话框。 - `ajax_dialog_needlogin.html`: 需要登录提示对话框。 - `ajax_dialog_...

    jqGrid dialog例子

    总的来说，这个例子展示了如何结合使用jqGrid、dialog、AJAX和MVC/LINQ来构建一个功能丰富的Web应用，提供数据管理的高效解决方案。这不仅提升了用户体验，也简化了开发过程。学习和理解这些技术对于Web开发者来说至...

    jQuery通用dialog对话框 popup提示信息窗口插件demo

    - **异步加载内容**：如果Dialog内容来自服务器，可以使用Ajax动态加载。 - **事件监听**：监听Dialog的各种事件，如打开、关闭、拖动等，以实现更复杂的逻辑。 通过以上内容，我们了解了jQuery通用Dialog对话框和...

    ajax 弹出对话框用户控件

    asp.net ajax 弹出对话框用户控件，简单方便

    dialog插件

    在实际应用中，Dialog插件可以与Ajax、表单验证、异步数据加载等技术结合，实现更为复杂的交互功能。比如，你可以将Dialog用作一个确认删除操作的提示框，或者用于展示加载动态内容的弹出窗口。其灵活性和强大的功能...

    java dialog弹出层实例

    3. **AJAX与Dialog** - AJAX技术可以用来异步更新对话框的内容。当用户触发某个事件时，可以通过AJAX请求向服务器发送数据，服务器响应后更新对话框的内容，而无需刷新整个页面。 4. **使用JSP和Servlet** - JSP...

    基于jquery的dialog插件

    在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。"基于jQuery的dialog插件"是一种扩展jQuery功能的组件，用于实现弹出对话框效果，通常用于展示警告信息、...

    jquery_dialog 弹出窗口

    在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画以及Ajax交互。在本实例中，我们关注的是`jquery_dialog`，这是一个jQuery插件，专门用于实现弹出窗口效果。这个插件使得在...

    18、jQuery弹出对话框jQuery插件Dialog

    在实际应用中，Dialog常与Ajax结合使用，动态加载内容或者进行异步操作，提供更加动态和交互的用户体验。 总结来说，jQuery Dialog插件是一个强大的工具，它使得在网页中创建功能丰富的对话框变得简单而直观。通过...

    Easyui使用Dialog打印

    EasyUI的DataGrid通常与后台的数据源（如Ajax请求）配合使用，展示数据。假设我们已经获取了JSON格式的数据，可以这样设置DataGrid： ```javascript var data = [ // JSON数据示例 {id: 1, name: '张三', age: 25...

    原生jQuery对话框插件dialogBox

    配合AJAX请求，可以实现异步操作后的动态提示，提升用户体验。例如，在提交表单前，可以使用dialogBox确认操作，或者在数据加载过程中显示加载对话框。 除了基本功能外，dialogBox还提供了丰富的选项和方法，如自动...

    jQuery dialog form 提交 后台不能取值的解决办法

    3. **Dialog关闭与刷新**：如果在表单提交后需要关闭Dialog，需在Ajax成功回调后再执行，以防止数据未发送即关闭对话框。 ```javascript success: function(response) { $("#dialog-form").dialog("close"); // ...

    jQuery触屏弹出对话框特效代码

    例如，`$.fn.dialogBox('open')`可以打开对话框，`$.fn.dialogBox('close')`则用于关闭。此外，插件还支持自定义设置，如对话框的大小、位置、样式以及按钮配置，以满足不同的设计需求。这些设置通常可以通过传递一...

Magicbox
Global site tag (gtag.js) - Google Analytics