<asp:Button ID="Button1" runat="server" Text="test" OnClientClick="gettext();" OnClick="Button1_Click" />需求:点击Button1时,触发OnClientClick事件:要求弹出一个DIV(或页面),里面有个文本框,输入文本内容且点击(div)里面的(如:确定)按钮后,才返回false(非常重要,返回必须是false),如果在弹出的DIV文本框没有输入直接关闭(或点击[取消])则返回true ,高手们如何实现呢?(即:OnClientClick客户端事件接收一个布尔值:true或false)
建议用个js的全局变量连变现div中的操作结果
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="div_txt" style="display:none">
<asp:TextBox ID="txt_abc" runat="server"></asp:TextBox>
<input id="Button2" type="button" value="确定" onclick="hideDiv();" />
<input id="Button3" type="button" value="取消" onclick="closeDiv();" />
</div>
<asp:Button ID="Button1" OnClientClick="showDiv();return false;" runat="server"
Text="Button" onclick="Button1_Click" UseSubmitBehavior="False" />
</form>
<script>
function showDiv() {
document.getElementById("div_txt").style.display = "";
}
function closeDiv() {
document.getElementById("txt_abc").value = "";
hideDiv();
}
function hideDiv() {
if (document.getElementById("txt_abc").value != "") {
document.getElementById("div_txt").style.display = "none";
}
else {
alert(document.getElementById("txt_abc").value);
document.getElementById("div_txt").style.display = "none";
__doPostBack("Button1", "");
}
} </script>
</body>
</html>using System;
using System.Collections.Generic;using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class test3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ } protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("后台被执行了!");
}
}
http://sentsin.com/jquery/layer/
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css">
#fullbg {
background-color: Gray;
display: none;
z-index: 30;
position: absolute;
left: 0px;
top: 0px;
filter: Alpha(Opacity=30);
/* IE */
-moz-opacity: 0.4;
/* Moz + FF */
opacity: 0.4;
} #dialog {
position: absolute;
width: auto;
height: auto;
/*background: #F00;*/
background: #fff;
display: none;
z-index: 50;
}
</style>
<script type="text/javascript">
//全局判断
var _txtContentF = false;
function gettext() {
showBg('dialog', 'dialog_content');
return _txtContentF;
}
function _submit() {
if ($("#_txtContent").val() == "") {
_txtContentF = true;
$("#_dvBtn :submit").click();
} else {
_txtContentF = false;
}
closeBg();
}
//显示灰色JS遮罩层
function showBg(ct, content) {
var bH = $("body").height();
var bW = $("body").width() + 16;
var objWH = getObjWh(ct);
$("#fullbg").css({ width: bW, height: bH, display: "block" });
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#" + ct).css({ top: tbT, left: tbL, display: "block" });
$(window).scroll(function () { resetBg() });
$(window).resize(function () { resetBg() });
}
function getObjWh(obj) {
var st = document.documentElement.scrollTop;//滚动条距顶部的距离
var sl = document.documentElement.scrollLeft;//滚动条距左边的距离 if (!document.all) {//ie st = document.body.scrollTop; //网页被卷去的高
sl = document.body.scrollLeft;
} else {
st = document.documentElement.scrollTop;//滚动条距顶部的距离
sl = document.documentElement.scrollLeft;//滚动条距左边的距离
}
if (navigator.userAgent.indexOf("Firefox") > 0) {//firefox
st = document.documentElement.scrollTop;//滚动条距顶部的距离
sl = document.documentElement.scrollLeft;//滚动条距左边的距离
}
var ch = document.documentElement.clientHeight;//屏幕的高度
var cw = document.documentElement.clientWidth;//屏幕的宽度
var objH = $("#" + obj).height();//浮动对象的高度
var objW = $("#" + obj).width();//浮动对象的宽度
var objT = Number(st) + (Number(ch) - Number(objH)) / 2;
var objL = Number(sl) + (Number(cw) - Number(objW)) / 2;
return objT + "|" + objL;
}
function resetBg() {
var fullbg = $("#fullbg").css("display");
if (fullbg == "block") {
var bH2 = $("body").height();
var bW2 = $("body").width() + 16;
$("#fullbg").css({ width: bW2, height: bH2 });
var objV = getObjWh("dialog");
var tbT = objV.split("|")[0] + "px";
var tbL = objV.split("|")[1] + "px";
$("#dialog").css({ top: tbT, left: tbL });
}
} //关闭灰色JS遮罩层和操作窗口
function closeBg() {
$("#_txtContent").val('');
$("#fullbg").css("display", "none");
$("#dialog").css("display", "none");
}
</script>
</head>
<body style="height:700px">
<form id="form1" runat="server">
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog" style="display: none;">
<div id="dialog_content">
输入内容:<input type="text" id="_txtContent" value=""/>
<br />
<br />
</div>
<div style="text-align: center;"><a href="javascript:void(0);" onclick="closeBg();">确定</a> <a href="javascript:void(0);" onclick="_submit();">取消</a></div>
</div>
<div id="_dvBtn">
<asp:Button ID="Button1" runat="server" Text="test" OnClientClick="return gettext();" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
修改:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css">
#fullbg {
background-color: Gray;
display: none;
z-index: 30;
position: absolute;
left: 0px;
top: 0px;
filter: Alpha(Opacity=30);
/* IE */
-moz-opacity: 0.4;
/* Moz + FF */
opacity: 0.4;
} #dialog {
position: absolute;
width: auto;
height: auto;
/*background: #F00;*/
background: #fff;
display: none;
z-index: 50;
}
</style>
<script type="text/javascript">
//全局判断
var _txtContentF = false;
function gettext() {
showBg('dialog', 'dialog_content');
return _txtContentF;
}
function _submit() {
if ($("#_txtContent").val() == "") {
_txtContentF = true;
$("#_dvBtn :submit").click();
} else {
_txtContentF = false;
}
closeBg();
}
function _noSubmit() {
_txtContentF = false;
$("#_dvBtn :submit").click();
closeBg();
} //显示灰色JS遮罩层
function showBg(ct, content) {
var bH = $("body").height();
var bW = $("body").width() + 16;
var objWH = getObjWh(ct);
$("#fullbg").css({ width: bW, height: bH, display: "block" });
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#" + ct).css({ top: tbT, left: tbL, display: "block" });
$(window).scroll(function () { resetBg() });
$(window).resize(function () { resetBg() });
}
function getObjWh(obj) {
var st = document.documentElement.scrollTop;//滚动条距顶部的距离
var sl = document.documentElement.scrollLeft;//滚动条距左边的距离 if (!document.all) {//ie st = document.body.scrollTop; //网页被卷去的高
sl = document.body.scrollLeft;
} else {
st = document.documentElement.scrollTop;//滚动条距顶部的距离
sl = document.documentElement.scrollLeft;//滚动条距左边的距离
}
if (navigator.userAgent.indexOf("Firefox") > 0) {//firefox
st = document.documentElement.scrollTop;//滚动条距顶部的距离
sl = document.documentElement.scrollLeft;//滚动条距左边的距离
}
var ch = document.documentElement.clientHeight;//屏幕的高度
var cw = document.documentElement.clientWidth;//屏幕的宽度
var objH = $("#" + obj).height();//浮动对象的高度
var objW = $("#" + obj).width();//浮动对象的宽度
var objT = Number(st) + (Number(ch) - Number(objH)) / 2;
var objL = Number(sl) + (Number(cw) - Number(objW)) / 2;
return objT + "|" + objL;
}
function resetBg() {
var fullbg = $("#fullbg").css("display");
if (fullbg == "block") {
var bH2 = $("body").height();
var bW2 = $("body").width() + 16;
$("#fullbg").css({ width: bW2, height: bH2 });
var objV = getObjWh("dialog");
var tbT = objV.split("|")[0] + "px";
var tbL = objV.split("|")[1] + "px";
$("#dialog").css({ top: tbT, left: tbL });
}
} //关闭灰色JS遮罩层和操作窗口
function closeBg() {
$("#_txtContent").val('');
$("#fullbg").css("display", "none");
$("#dialog").css("display", "none");
}
</script>
</head>
<body style="height:700px">
<form id="form1" runat="server">
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog" style="display: none;">
<div id="dialog_content">
输入内容:<input type="text" id="_txtContent" value=""/>
<br />
<br />
</div>
<div style="text-align: center;"><a href="javascript:void(0);" onclick="_noSubmit();">确定</a> <a href="javascript:void(0);" onclick="_submit();">取消</a></div>
</div>
<div id="_dvBtn">
<asp:Button ID="Button1" runat="server" Text="test" OnClientClick="return gettext();" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css">
#fullbg {
background-color: Gray;
display: none;
z-index: 30;
position: absolute;
left: 0px;
top: 0px;
filter: Alpha(Opacity=30);
/* IE */
-moz-opacity: 0.4;
/* Moz + FF */
opacity: 0.4;
} #dialog {
position: absolute;
width: auto;
height: auto;
/*background: #F00;*/
background: #fff;
display: none;
z-index: 50;
}
</style>
<script type="text/javascript">
//全局判断
var _txtContentF = false;
function gettext() {
showBg('dialog', 'dialog_content');
return _txtContentF;
}
function _submit() {
if ($("#_txtContent").val() != "") {
_txtContentF = true;
$("#_dvBtn :submit").click();
} else {
_txtContentF = false;
alert("请输入内容!");
}
}
function _noSubmit() {
_txtContentF = false;
$("#_dvBtn :submit").click();
closeBg();
} //显示灰色JS遮罩层
function showBg(ct, content) {
var bH = $("body").height();
var bW = $("body").width() + 16;
var objWH = getObjWh(ct);
$("#fullbg").css({ width: bW, height: bH, display: "block" });
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#" + ct).css({ top: tbT, left: tbL, display: "block" });
$(window).scroll(function () { resetBg() });
$(window).resize(function () { resetBg() });
}
function getObjWh(obj) {
var st = document.documentElement.scrollTop;//滚动条距顶部的距离
var sl = document.documentElement.scrollLeft;//滚动条距左边的距离 if (!document.all) {//ie st = document.body.scrollTop; //网页被卷去的高
sl = document.body.scrollLeft;
} else {
st = document.documentElement.scrollTop;//滚动条距顶部的距离
sl = document.documentElement.scrollLeft;//滚动条距左边的距离
}
if (navigator.userAgent.indexOf("Firefox") > 0) {//firefox
st = document.documentElement.scrollTop;//滚动条距顶部的距离
sl = document.documentElement.scrollLeft;//滚动条距左边的距离
}
var ch = document.documentElement.clientHeight;//屏幕的高度
var cw = document.documentElement.clientWidth;//屏幕的宽度
var objH = $("#" + obj).height();//浮动对象的高度
var objW = $("#" + obj).width();//浮动对象的宽度
var objT = Number(st) + (Number(ch) - Number(objH)) / 2;
var objL = Number(sl) + (Number(cw) - Number(objW)) / 2;
return objT + "|" + objL;
}
function resetBg() {
var fullbg = $("#fullbg").css("display");
if (fullbg == "block") {
var bH2 = $("body").height();
var bW2 = $("body").width() + 16;
$("#fullbg").css({ width: bW2, height: bH2 });
var objV = getObjWh("dialog");
var tbT = objV.split("|")[0] + "px";
var tbL = objV.split("|")[1] + "px";
$("#dialog").css({ top: tbT, left: tbL });
}
} //关闭灰色JS遮罩层和操作窗口
function closeBg() {
$("#_txtContent").val('');
$("#fullbg").css("display", "none");
$("#dialog").css("display", "none");
}
</script>
</head>
<body style="height:700px">
<form id="form1" runat="server">
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog" style="display: none;">
<div id="dialog_content">
输入内容:<input type="text" id="_txtContent" value=""/>
<br />
<br />
</div>
<div style="text-align: center;"><a href="javascript:void(0);" onclick="_submit();">确定</a> <a href="javascript:void(0);" onclick="_noSubmit();">取消</a></div>
</div>
<div id="_dvBtn">
<asp:Button ID="Button1" runat="server" Text="test" OnClientClick="return gettext();" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
function _noSubmit() {
_txtContentF = false;
$("#_dvBtn :submit").click();
closeBg();
}
把这个删了,没用:
//$("#_dvBtn :submit").click();
var result = document.getElementById('_dvBtn').onclick();
还是
var result = document.getElementById('Button1').OnClientClick();具体该如何写呢?多谢谢了!99步了,还差一步了....
function gettext() {
showBg('dialog', 'dialog_content');
return _txtContentF;
}因为调用这个方法主要是:
1.弹出S遮罩层 showBg方法
2. 返回 全局判断变量。 都没更改过。当然是默认值 false你是想点击另外一个按钮 获取之前服务器控件操作 是否回发给服务器处理过吗?
前台代码:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style type="text/css">
#fullbg
{
background-color: Gray;
display: none;
z-index: 30;
position: absolute;
left: 0px;
top: 0px;
filter: Alpha(Opacity=30);
/* IE */
-moz-opacity: 0.4;
/* Moz + FF */
opacity: 0.4;
} #dialog
{
position: absolute;
width: auto;
height: auto;
/*background: #F00;*/
background: #fff;
display: none;
z-index: 50;
}
</style>
<script type="text/javascript">
//全局判断
var _txtContentF = false;
function _submit() {
if ($("#_txtContent").val() != "") {
_txtContentF = true;
$('.rmText').each(function () {
if ($(this).html() == "Add") {
$(this).click();
}
});
} else {
_txtContentF = false;
alert("请输入内容!");
}
}
function _noSubmit() {
_txtContentF = false;
closeBg();
} //显示灰色JS遮罩层
function showBg(ct, content) {
var bH = $("body").height();
var bW = $("body").width() + 16;
var objWH = getObjWh(ct);
$("#fullbg").css({ width: bW, height: bH, display: "block" });
var tbT = objWH.split("|")[0] + "px";
var tbL = objWH.split("|")[1] + "px";
$("#" + ct).css({ top: tbT, left: tbL, display: "block" });
$(window).scroll(function () { resetBg() });
$(window).resize(function () { resetBg() });
}
function getObjWh(obj) {
var st = document.documentElement.scrollTop;//滚动条距顶部的距离
var sl = document.documentElement.scrollLeft;//滚动条距左边的距离 if (!document.all) {//ie st = document.body.scrollTop; //网页被卷去的高
sl = document.body.scrollLeft;
} else {
st = document.documentElement.scrollTop;//滚动条距顶部的距离
sl = document.documentElement.scrollLeft;//滚动条距左边的距离
}
if (navigator.userAgent.indexOf("Firefox") > 0) {//firefox
st = document.documentElement.scrollTop;//滚动条距顶部的距离
sl = document.documentElement.scrollLeft;//滚动条距左边的距离
}
var ch = document.documentElement.clientHeight;//屏幕的高度
var cw = document.documentElement.clientWidth;//屏幕的宽度
var objH = $("#" + obj).height();//浮动对象的高度
var objW = $("#" + obj).width();//浮动对象的宽度
var objT = Number(st) + (Number(ch) - Number(objH)) / 2;
var objL = Number(sl) + (Number(cw) - Number(objW)) / 2;
return objT + "|" + objL;
}
function resetBg() {
var fullbg = $("#fullbg").css("display");
if (fullbg == "block") {
var bH2 = $("body").height();
var bW2 = $("body").width() + 16;
$("#fullbg").css({ width: bW2, height: bH2 });
var objV = getObjWh("dialog");
var tbT = objV.split("|")[0] + "px";
var tbL = objV.split("|")[1] + "px";
$("#dialog").css({ top: tbT, left: tbL });
}
} //关闭灰色JS遮罩层和操作窗口
function closeBg() {
$("#_txtContent").val('');
$("#fullbg").css("display", "none");
$("#dialog").css("display", "none");
}
$(document).ready(function () {
$('.rmText').each(function () {
if ($(this).html() == "Add") {
$(this).click(function () {
showBg('dialog', 'dialog_content');
return _txtContentF;
});
}
});
});
</script>
</head>
<body style="height:700px">
<form id="form1" runat="server">
<!-- JS遮罩层 -->
<div id="fullbg"></div>
<!-- end JS遮罩层 -->
<!-- 对话框 -->
<div id="dialog" style="display: none;">
<div id="dialog_content">
输入内容:<input type="text" id="_txtContent" value="" />
<br />
<br />
</div>
<div style="text-align: center;"><a href="javascript:void(0);" onclick="_submit();">确定</a> <a href="javascript:void(0);" onclick="_noSubmit();">取消</a></div>
</div>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button Text="123" runat="server" OnClientClick="" />
<telerik:RadTreeView ID="RadTreeView1" runat="server" OnContextMenuItemClick="RadTreeView1_ContextMenuItemClick">
<ContextMenus>
<telerik:RadTreeViewContextMenu runat="server" ID="HelpDeskMenu" ClickToOpen="True">
<Items>
<telerik:RadMenuItem Text="Add" Value="Add">
</telerik:RadMenuItem>
<telerik:RadMenuItem Text="Delete" Value="Delete">
</telerik:RadMenuItem>
</Items>
</telerik:RadTreeViewContextMenu>
</ContextMenus>
<Nodes>
<telerik:RadTreeNode runat="server" Text="Trouble Ticket" ContextMenuID="HelpDeskMenu">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Equipment Request" ContextMenuID="HelpDeskMenu">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Help Desk Question" EnableContextMenu="false">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</div>
</form>
</body>
</html>
后台代码: using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ }
protected void RadTreeView1_ContextMenuItemClick(object sender, Telerik.Web.UI.RadTreeViewContextMenuEventArgs e)
{
switch (e.MenuItem.Value)
{
case "Add":
if (e.Node.Level == 0)
{
e.Node.Nodes.Add(new RadTreeNode("New " + e.Node.Text + " " + DateTime.Now.ToString()));
e.Node.Expanded = true;
}
break;
case "Delete":
if (e.Node.Level == 1)
{
e.Node.Remove();
}
break;
}
}
}