0

我在 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 应该这样做。

4

3 回答 3

3

我不能使用 AJAX，因为我不允许在服务器上安装扩展...

AJAX 没有安装在任何服务器上。它只是Javascript。我已经很多年没有使用过 ASP.Net AJAX 扩展了，所以我忘记了是否需要安装它或者只是进行 bin 部署。无论如何，利用“Ajax”并不依赖于任何扩展/库——它们使事情变得更容易，但它们不是“必需的”。

#

  • 你id的<div />不是输入
  • 你<input />是一个提交，虽然你仍然可以使用它，但尝试一个按钮来让事情变得更容易
于 2012-10-10T14:58:04.287 回答
1

如果您执行以下操作会发生什么？

<asp:button runat="server" text="Click Me" OnClientClick="javascript:loadPopup()" id="myButton"></asp:button>
于 2012-10-10T15:22:26.827 回答
1

问题是您的 jQuery 选择器中有错误的元素 ID。

您应该更改backgroundPopup为popupAdminTasks其他popupContact内容。

http://jsfiddle.net/2mSkM/

于 2012-10-12T14:39:14.180 回答