从后面的代码打开 Bootstrap 模式答案

【问题标题】：Open Bootstrap modal from code behind从后面的代码打开 Bootstrap 模式
【发布时间】：2015-11-18 14:55:42
【问题描述】：

我正在尝试从后面的代码中打开引导模式。但是，当我单击按钮时，会出现警报消息，但模式永远不会出现在页面上。我已经看过其他问题，但没有一个对我有用。请问有什么我遗漏的吗？

ASPX 页面

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
         function openModal() {
             alert('hiii');
             $('#myModal').modal('show');
         }          
    </script>


    <div id="myModal" class="modal fade" role="dialog" runat="server">
        <div class="modal-dialog">

        <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
     </div>

    <div>
        <asp:Button runat="server" ID="btnUploadFile" Text="Upload File" OnClick="btnUploadFile_OnClick" class="btn standard-gradient disabled" />
    </div>
</asp:Content>

代码背后

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

【问题讨论】：

服务器命名约定，你的myModal归属于runat="server"，尽量使用$('#<%=myModal.ClientID%>').modal('show');
如果你从javascript触发openModal()；模型显示了吗？
@haraman 我试过了，但没有运气
@MarcusH 我会检查

标签： javascript jquery asp.net twitter-bootstrap

【解决方案1】：

我有一个带有布局的母版页 Default.aspx：

<html>
     <head>
            <link rel="stylesheet" type="text/css" href="../Styles/bootstrap.min.css" />   
     <script src="../js/bootstrap.min.js" type="text/javascript"></script> 
     </head>
    <body>
        <input type="hidden" runat="server" value="" id="hiddenAlert" name="hiddenAlert" clientidmode="Static" />
    ………….
    <div class="modal modalMain fade" id="myModalMain" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow-y: hidden;">
        <div class="modal-dialog" style="position: relative; top: 25%; left: 0%; width: 300px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="modalBody" class="modal-body modal-body-main">
                    ...
                </div>
                <div class="modal-footer" style="margin-top: 0px; padding: 5px; text-align: center;">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    if ($('#hiddenAlert').val() != '') {
        $('.modal-body-main').html($('#hiddenAlert').val());
        $('.modalMain').modal('show');

    }
</script>

     </body>
</html>

在代码床中：

protected void Page_Load(object sender, EventArgs e)
{
    ………..
    string alert = this.Request["alert"];
            if(alert == "success")
                hiddenAlert.Value = "Data saved successfull";
            else
                hiddenAlert.Value = "Data saved fail";
}

在另一个页面中，我有一个表单和一个提交按钮

<asp:Button ID="btnLuu" runat="server" Text="Lưu" CssClass="input" onclick="btnLuu_Click"/>

在代码床中：

protected void btnLuu_Click(object sender, EventArgs e)
{
    ….//save your data
    //if save successful
    Response.Redirect("Default.aspx?Module=" + cModule + "&l=" + language_id + "&p=" + p + "&alert=success");

}

因此，您可以显示任何警报内容：成功、失败或存在数据……为您网站中的所有页面弹出模式。

【讨论】：