提示信息窗口的JS实现

最新推荐文章于 2024-09-21 11:29:05 发布

szw104

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量664

点赞数

文章标签： textbox javascript server stylesheet asp div

本文链接：https://blog.csdn.net/szw104/article/details/1660384

版权

提示信息窗口的JS实现

Posted on 2007-04-27 10:22 szw104 阅读(4) 评论(0) 编辑收藏引用网摘所属分类: AJAX

【前台】

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%--引用外部文件的格式--%>

<%--<link href="../MessageBox.css" rel="stylesheet" type="text/css" />--%>

<%--<script language="javascript" src="../Owner.js" type="text/jscript"></script>--%>

<%--实现Popup功能--%>

//Create a popup window

var oPopup = window.createPopup();

var oPopupBody = oPopup.document.body;

oPopupBody.innerHTML = '<DIV id="divValidCharMoreInfo"><DIV ID="divValidCharMessage">AX made:</DIV><DIV ID="divValidCharSet"></DIV></DIV>';

oPopupBody.style.backgroundColor = "lightyellow";

oPopupBody.style.border = "solid black 1px";

oPopupBody.style.padding = "3px";

oPopup.document.all("divValidCharMessage").style.color = "green";

oPopup.document.all("divValidCharMessage").style.fontFamily = "arial";

oPopup.document.all("divValidCharSet").style.fontFamily = "arial";

oPopup.document.all("divValidCharMessage").style.fontSize = "9px";

oPopup.document.all("divValidCharSet").style.fontSize = "9px";

oPopup.hide();

//hide the pop-up window

function OnMouseOutValidCharactersMoreInformation()

{

oPopup.hide();

}

//show the pop-up window

function OnMouseMoveValidCharactersMoreInformation(charSet, height, width)

{

if (!oPopup.isOpen)

{

var obj = event.srcElement;

// alert(event.srcElement.innerHTML);

// alert(charSet);

oPopup.document.all("divValidCharSet").innerHTML = "Input the detail info in herre.<br />"+charSet;

// oPopup.document.all("divValidCharMessage").innerText = "";

// alert(obj.parent);

// var x = OffsetLeft(obj.parent) + event.clientX;

// var y = OffsetTop(obj.parent) + event.clientY + 5;

var x = event.clientX;

var y = event.clientY + 5;

// var width = oPopup.document.all("divValidCharMoreInfo").offsetWidth;

// var height = oPopup.document.all("divValidCharMoreInfo").offsetHeight;

oPopup.show(x, y, height, width, document.body);

}

event.cancelBubble = true;

}

</script>

<%--Popup功能高级应用JS--%>

function clientValidator_AX(AX,zhz)

{

if(document.getElementById("TextBox1").value=="AX")

{

zhz.IsValid=true;

}

else

{

zhz.IsValid=false;

}

</script>

<%--Popup功能高级应用CSS--%>

.moreInformationValidCharSet

{

cursor:hand;

color:blue;

font-family:arial;

font-size:10px;

text-decoration:underline

}

</style>

<title>Untitled Page</title>

</head>

<body>

<font color="olive">基本功能演示:鼠标放我上面!</font>

</span>

<br />

<div>

只有文本框输入的内容为【AX】时,页面才进行PostBack动作!

</div>

<div>

 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

<asp:Button ID="Button1" runat="server" Text="点我" /><br />

<asp:CustomValidator ID="CustomValidator_AX" runat="server" ErrorMessage="" ClientValidationFunction="clientValidator_AX" ControlToValidate="TextBox1" Display="Dynamic" ValidateEmptyText="True"></asp:CustomValidator>

</div>

</form>

</body>

</html>

【后台】

【使用】
直接为控件添加两个触发事件就OK了.如下:

< span onmousemove ="OnMouseMoveValidCharactersMoreInformation('Hello',320,70)" onmouseout ="OnMouseOutValidCharactersMoreInformation()" >

szw104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫