Ajax dialog

最新推荐文章于 2021-11-17 14:19:26 发布

lishushan

最新推荐文章于 2021-11-17 14:19:26 发布

阅读量157

点赞数

分类专栏： Ajax 文章标签： Ajax JavaScript Safari ASP Firefox ViewUI

本文链接：https://blog.csdn.net/lishushan/article/details/83529060

版权

Ajax 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<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)
{
/*
传参数时用“"”代替" 用“\'”代替 '
如果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' οnclick='CloseMsg()'>关闭</td></tr></table>" +

"<table width='100%' border='0' cellspacing='1' cellpadding='0' class='bdy'><tr><td align='left' valign='top'>" +
"<p>标　题: <input type='text' name='MsgSubject' style='width:400px;'></p>" +
"<p>发信人: <input type='text' name='MsgSender'></p>" +
"<p>收信人: <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> " +
"<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>

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

</body>
</html>

lishushan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax dialog

&lt;html&gt;&lt;head&gt;&lt;title&gt;弹出式Ajax消息发发送窗口&lt;/title&gt;&lt;style&gt;.msgbox{ z-index:1101;}.msgbox,#sendmsg{width:600px;}.msgbox .head{ width:600px;border:1px solid #00CCFF; height:24px; tex...
复制链接

扫一扫