Question

我有一个asp面板，它使用ajax作为Modal弹出窗口打开。在此面板中有一些可以回发的用户控件，例如允许自定义编辑和添加的gridview。

然而，由于Panel的大小，我不得不引入滚动条，以便用户可以滚动asp面板并编辑相应的gridview。在回发时虽然Panel中的滚动条重复放在顶部，而不是保持滚动位置。

我的问题是;有没有办法在thisModal Popup Extender面板中保持滚动位置？

Answer 1

使用的代码（供参考）是：

var iST;
$(document).ready(function() {
getScrollPosition();
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(getScrollPosition);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(setScrollPosition);
});

function pageLoad() {
    var popup = $find('<%=MODALPOPUPNAME.ClientID%>');
    popup.add_shown(setScrollPosition);
}

function getScrollPosition() {
    iST = $("#<%=PANELNAME.ClientID %>").scrollTop();
}
function setScrollPosition() {
    $("#<%=PANELNAME.ClientID %>").scrollTop(iST + 20);
}

感谢。

Answer 2

花了几个小时，我才得以实现。假设我们有一个名为myDiv的div，它位于一个名为pnlPopup的弹出面板中。每次myDiv上有一个scoll时，我们都需要使用JavaScript来标记滚动位置。我们在一个名为hfScrollP的隐藏元素中标记此滚动位置。

<script type="text/javascript">
    function markScrollPosition() {
        var div = document.getElementById("myDiv").scrollTop;
        document.getElementById('<%=hfScrollP.ClientID %>').value = div;
    }
</script>

<asp:HiddenField ID = "hfScrollP" runat = "server" />
<asp:Panel ID="pnlPopup" runat="server"  Width="750px" style="display:none;">

    <div id="myDiv" style="height: 350px; width: 700px;overflow: auto;" 
          onscroll="markScrollPosition();">

    </div>

</asp:Panel>

然后我们有一个按钮，它将打开单击时弹出的窗口和模态弹出扩展器。

<asp:Button ID="btnShowModalPopup" runat="server" Text="Show" />
<ajaxToolkit:ModalPopupExtender ID="mpePopup" runat="server" 
   TargetControlID="btnShowModalPopup" 
   PopupControlID="pnlPopup" DropShadow="True" BackgroundCssClass="modalBackground"  
   Enabled ="true">
</ajaxToolkit:ModalPopupExtender>

我们需要这个javascript，以便在每次回发并显示弹出窗口时在弹出窗口中设置滚动位置。

<script type="text/javascript" language="javascript">
                function pageLoad() {
                    var modal = $find('<%=mpePopup.ClientID %>');
                    $find('<%=mpePopup.ClientID %>').add_shown(
                        function () {                       
                     $('#myDiv').scrollTop(document.getElementById('<%=hfScrollP.ClientID %>').value);
                    }
                       );
                }
 </script>

在您的代码后面。

  Private Sub btnShowModalPopup_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShowModalPopup.Click
            //Do your necessary processing
            mpePopup.show();
        End Sub

就是这样。显示弹出窗口时，它将回滚到最后标记的向下滚动位置。希望对您有所帮助：）

Answer 3

您可以更改特定Div的javascript代码。

<script type="text/javascript">
    function pageLoad() {
        $('#DataDiv').scrollTop(document.getElementById('<%=hfScrollT.ClientID %>').value).scrollLeft(document.getElementById('<%=hfScrollL.ClientID %>').value);
    }
</script>

希望有帮助！

Ajax ModalPopupExtender Postback Scrollbar

3 个答案: