我有一个用 ASP.net 和 C# 编写的网页(我正在使用 Visual Studio 2010,如果这有帮助的话),我想在按钮单击事件之后获得一个模式弹出框。我无法使用AJAX,因为我不允许在服务器上安装扩展...所以我尝试了 yensdesign 提供的javascript方法.
我遇到的问题是我设置的按钮没有执行任何操作...我猜由于我是从 asp.net 网页而不是标准 html 调用此按钮,所以我需要做一些事情额外但一天的谷歌搜索,询问了我认识的每个人,并且尝试和错误没有产生任何结果,所以我在这里......
我的“脚本”文件夹中有以下内容,名为 popupAdminTasks.js:
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup()
{
//loads popup only if it is disabled
if (popupStatus == 0) {
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup()
{
//disables popup only if it is enabled
if (popupStatus == 1) {
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup()
{
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
"left": windowWidth / 2 - popupWidth / 2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function () {
//LOADING POPUP
//Click the button event!
$("#btnViewTimesheet").click(function () {
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupBtnClose").click(function () {
disablePopup();
});
//Click out event!
$("#backgroundPopupAdminTasks").click(function () {
disablePopup();
});
//Press Escape event!
$(document).keypress(function (e) {
if (e.keyCode == 27 && popupStatus == 1) {
disablePopup();
}
});
});
那太好了。然后我有了我的 css 文件,其中包含所有正常的内容,底部的附加内容如下:
/* POPUP BOX
----------------------------------------------------------*/
#backgroundPopup
{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupAdminTasks
{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupAdminTasks h1
{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupBtnClose
{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#btnViewTimesheet
{
margin:100px;
}
太棒了。所以现在我们来看看实际的 aspx 文件...这有点棘手,因为显然我不只是在做一个测试项目,所以我没有 head 部分,而是有一个 headcontent 部分等...无论如何,这里是相关的点滴:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link rel="stylesheet" href="../Styles/AdminPage.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../Scripts/popupAdminTasks.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="btnViewTimesheet">
<input type="submit" value="View/Edit Timesheet" />
</div>
<div id="popupAdminTasks" runat="server">
<a id="popupBtnClose">X</a>
<h1>What would you like to do?</h1>
<p id="popupAdminTasksBody">
<asp:ImageButton ID="imgBtnCalendar" runat="server" Height="70px" Width="65px"
ImageUrl="~/Images/calendar.png" AlternateText="View/Edit Timesheet" />
</p>
</div>
<div id="backgroundPopupAdminTasks">
</div>
</asp:Content>
所以......这一切都构建没有错误,但我按下按钮btnViewTimesheet
并且没有任何反应......有什么想法吗?我一直在想的是,我在 C# 代码中没有点击事件,我以为我需要这个,并指向该事件中的 js 代码,但我读过的所有内容和我读过的人谈话者告诉我不,我不应该需要这个,因为 javascript 应该做到这一点。
最佳答案
I can't use AJAX because I'm not allowed to install the extension on the server...
任何服务器上均未安装 AJAX。它只是 JavaScript。我已经很多年没有使用 ASP.Net AJAX 扩展了,所以我忘记了是否需要安装它或者只是进行 bin 部署。无论如何,利用“Ajax”并不依赖于任何扩展/库 - 它们使事情变得更容易,但它们不是“必需的”。
#
- 您的
id
是针对<div />
不是输入 - 您的
<input />
是一个提交,虽然您仍然可以使用它,但尝试使用按钮以使事情变得更容易
关于c# - 尝试从 asp.net 引用 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12822146/