【问题标题】:bootstrap modal popup c# codebehindbootstrap modal popup c# codebehind
【发布时间】:2013-03-19 06:55:25
【问题描述】:

我在我的 c# asp.net 项目中使用引导程序,我想显示以显示来自后面代码的模式弹出窗口。

在我的页面标题中,我有一个 javascript 函数,如下所示:

function LoginFail() {
        $('#windowTitleDialog').modal('show');
    }

点击我的按钮,我将调用 javascript,如下所示

ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "LoginFail();", true);

这不会显示模式弹出窗口。但是,如果我使用 alert('login failed') 之类的东西,它就可以正常工作。

有人可以帮忙吗?

【问题讨论】:

    标签: c# javascript twitter-bootstrap


    【解决方案1】:

    我假设,您正在使用 jQuery 模态插件之一。在这种情况下,我怀疑插件代码在调用时没有初始化(在它被渲染到页面后立即)。在执行插件代码后,您必须推迟对该函数的调用。您的案例的实现可能如下所示:

    ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "$(function() { LoginFail(); });", true);
    

    【讨论】:

      【解决方案2】:

      我有同样的问题,试图找到在线解决方案,但我无法这样做。正如您从后面的代码中所说的那样,我可以调用其他 javascript 函数,但是当我添加模态 js 函数时,模态不会出现。

      我的猜测是 modal.('show') 函数没有被调用,因为当我在 crhome 中检查 modal 元素时,该类是 modal hide fade 而不是 modal hide fade IN,其他属性保持不变。

      p>

      一个可能的解决方案是从后面的代码中更改这些属性,我的意思是您可以从后面的代码中执行 js 所做的事情,可能不是最好的解决方案,但我没有其他办法。通过这样做,我让模态显示为背景灰色,但无法使效果起作用。

      【讨论】:

        【解决方案3】:

        我就是这样解决的:

        脚本函数

        <script type="text/javascript">
            function LoginFail() {
                $('#windowTitleDialog').modal();
            }        
        </script>
        

        按钮声明

        <asp:Button ID="LaunchModal" runat="server" Text="Launch Modal" CssClass="btn" onclick="LaunchModal_Click"/>
        

        注意属性 data-togle="modal" 没有设置。

        LaunchModal_Click 事件中的服务器端代码为:

        ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { LoginFail(); });", true);
        

        希望对你有所帮助。

        【讨论】:

        • 救了一个生命伴侣 :) 我希望在内容页面中遇到此问题的人将方法包装在 document.ready 中,就像您所做的那样。谢谢
        【解决方案4】:

        默认情况下,Bootstrap javascript 文件包含在结束正文标记之前

            <script src="vendors/jquery-1.9.1.min.js"></script>
            <script src="bootstrap/js/bootstrap.min.js"></script>
            <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
            <script src="assets/scripts.js"></script>
         </body>
        

        我将这些 javascript 文件放入 body 标签之前的 head 部分,并编写了一个小函数来调用模态弹出窗口:

        <script src="vendors/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
        <script src="assets/scripts.js"></script>
        
        <script type="text/javascript">
        function openModal() {
            $('#myModal').modal('show');
        }
        </script>
        </head>
        <body>
        

        然后我可以使用以下代码从代码隐藏中调用模式弹出窗口:

        protected void lbEdit_Click(object sender, EventArgs e) {   
          ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
        }
        

        【讨论】:

          【解决方案5】:

          我在 aspx 页面中这样做:

          <asp:Panel ID="MessagePanel" runat="server" CssClass="hide"  EnableViewState="false">
          <div class="modal-header">
          <asp:Button type="button" ID="btnClose" runat="server" data-dismiss="modal" Text="x" />
          </div>
          <div class="modal-body">
          <h4>What's new in this version</h4>
          ... rest of bootstrap modal stuff....
          </div>
          </asp:Panel>
          

          然后在代码隐藏中显示任何事件(例如 page.load 或按钮单击)的模式弹出窗口,我只需更改面板的 CssClass:

          MessagePanel.CssClass = "modal fade in"
          

          不需要 js 或 ScriptManager。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2020-06-15
            • 1970-01-01
            相关资源
            最近更新 更多