在使用 jquery 控件的 asp.net 代码中调用页面加载时的弹出面板答案

【问题标题】：call popup panel on page load in asp.net code behind using jquery control在使用 jquery 控件的 asp.net 代码中调用页面加载时的弹出面板
【发布时间】：2014-02-01 05:55:29
【问题描述】：

我想在页面加载时显示模态窗口（在下面的JavaScript 函数中执行）：

<script type="text/javascript">

$(function () {    
    $('.popup-wrapper').modalPopLite({
        openButton: '.clicker', 
        closeButton: '#close-btn', 
        isModal: true 
    });    
});

</script>

<asp:HyperLink ID="clic" Text="ck" runat="server" CssClass="clicker" NavigateUrl="#">
</asp:HyperLink>

<asp:Panel ID="cli" runat="server" CssClass="popup-wrapper" Width="500" Height="500" >  
    <a href="#" id="A1">Close</a>    
</asp:Panel>

我如何在 asp.net 中做到这一点？

【问题讨论】：

我想在页面加载时显示它关闭现在它已连接通过链接告诉我任何更新，以便我可以在 asp.net 中的页面加载事件中调用它
它与超链接连接，但我想在页面加载事件后面的代码上调用它
这个链接可能对你有帮助吗stackoverflow.com/questions/19111890/…
user3201772，如果您通过编辑帖子将代码从 cmets 发布到问题会更好

标签： c# jquery asp.net

【解决方案1】：

如果您希望它在每次页面加载时显示，您可以在 document 对象上使用 JQuery .ready() 函数，该函数将在 DOM 完全加载时执行此脚本。否则，可能发生的情况是您在 $('.popup-wrapper').modalPopLite() 或任何已初始化的函数之前执行函数并收到 JavaScript 错误。

所以你应该这样做：

$(document).ready(function () {    
    $('.popup-wrapper').modalPopLite({
        openButton: '.clicker', 
        closeButton: '#close-btn', 
        isModal: true 
    });    
});

现在，如果您只想在第一个页面加载时显示此内容，而不是在任何其他回发时显示，则需要使用 C# 代码隐藏：

public partial class SomePage : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // The @ character denotes a string literal; just makes it easy to 
            // use multiple lines in this case and keep the inline javascript 
            // code looking nicely formatted within C#

            ClientScript.RegisterStartupScript(this.GetType(), "PopModal", @"
                $(document).ready(function () {    
                    $('.popup-wrapper').modalPopLite({
                        openButton: '.clicker', 
                        closeButton: '#close-btn', 
                        isModal: true 
                    });    
                });"
            );
        }
    }
}

【讨论】：