1

我有一个事件日历，在日历中的每个事件上都有一个编辑链接，它打开 ajaxModalPopupExtender来编辑事件信息。我现在面临的问题是编辑必须采用一种形式，以便它可以更新服务器上的信息..

我该如何处理？最好的方法是什么？

4

2 回答 2

0

您可以使用 jQuery 来完成相同的功能。我最近不得不为一个项目这样做，因为我不喜欢 ModalPopupExtender 处理它的方式。不幸的是，虽然我没有构建拖动点击和拖动功能。

这是 ASP.NET 和 XHTML 的代码：

在页面的某处，您放置了触发按钮：

<input type="button" value="Trigger Action" class="popup-trigger-delete" />

面板代码：

<div class="popup-wrapper popup-wrapper-delete">
  <div class="popup-top"></div>
  <div class="popup-middle">
    <div class="content">Are you sure you want to delete this from your project?</div>
    <div class="controls">
      <asp:Button ID="btnDelete_Yes" runat="server" CssClass="left" OnClick="btnDelete_Yes_OnClick" />
      <input type="button" value="Cancel" class="right popup-background-delete-cancel" />
    </div>
  </div>
  <div class="popup-bottom"></div>
</div>
<div class="popup-background popup-background-delete-track"></div>

Javascript / jQuery

var fadeInTime = 400;
var popupStatus = 0;

function loadPopup(wrapper){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $(wrapper).fadeIn(fadeInTime);
        popupStatus = 1;
    }
}

function disablePopup(wrapper, background){
    if(popupStatus==1){
        $(background).fadeOut(fadeInTime);
        $(wrapper).fadeOut(fadeInTime);
        popupStatus = 0;
    }
}

function centerPopup(wrapper, background){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $(wrapper).height();
    var popupWidth = $(wrapper).width();
    //centering
    $(wrapper).css({ 
        "position": "fixed", 
        "top": (windowHeight/2-100)-popupHeight/2, 
        "left": windowWidth/2-popupWidth/2,
        "z-index" : "10000"
    });
    $(background).css({ "height": windowHeight });
}

//event handlers

var trigger = "input.popup-trigger-delete";
var wrapper = "div.popup-wrapper-delete";
var background = "div.popup-background-delete";
var dtpbc = "input.popup-background-delete-cancel";

$(document).ready(function(){
    $(trigger).click(function(){ centerPopup(wrapper,background); loadPopup(wrapper); });
    $(dtpbc).click(function(){ disablePopup(wrapper, background); });
    $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(wrapper,background); } });
});

CSS

div.popup-background-delete { display:none; }
div.popup-wrapper-delete { display:none; }  

div.popup-wrapper { position:relative; display:none; display:block; width:350px; height:245px; padding:0; margin:0; z-index:5000; }
div.popup-top { position:relative; display:block; background-color:#ffffff;  width:350px; height:40px; padding:0; margin:0; z-index:5000; }
div.popup-middle { position:relative; display:block; background-color:#ffffff;  width:350px; min-height:165px; padding:0; margin:0; z-index:5000; }
div.popup-middle .content { position:relative; display:block; margin:0 auto; padding-top:20px; padding-bottom:10px; width:255px; z-index:5000; }
div.popup-middle .controls .left { position:absolute; top:0; left:80px; z-index:5000; }
div.popup-middle .controls .right { position:absolute; top:0; right:80px; z-index:5000;}
div.popup-bottom { position:relative; display:block; background-color:#ffffff; width:350px; height:40px; padding:0; margin:0; z-index:5000; }
div.popup-background { position:absolute; top:0; left:0; width:100%; height:100%; z-index:5000; background-color:#cbcbcb; opacity:0.2; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity:0.2; }
于 2009-01-22T16:05:52.523 回答
0

为了使上述示例正常工作（抱歉，无法评论），请执行以下操作：

  • 将 asp 按钮更改为 html 按钮
  • 将“弹出背景删除轨道”更改为“弹出背景删除”
  • 在 centerPopup 中，替换$(background).css({ "height": windowHeight });为$(background).css({ "display": 'block' });
  • 删除display:blockCSS 中的所有引用。
于 2009-06-22T14:45:12.977 回答