Question

我想在页面加载时显示模态窗口（在下面的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中执行此操作？

Answer 1

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

所以你要这样做：

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

现在，如果您只希望在第一页加载时显示此内容，而不是在任何进一步的回发中，则需要使用C＃codebehind：

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 
                    });    
                });"
            );
        }
    }
}

使用jquery控件在asp.net代码后面的页面加载上调用弹出面板

1 个答案: