Bootstrap模式不能与按钮单击一起使用

时间:2017-08-06 20:37:03

标签: javascript c# html asp.net bootstrap-modal

我正在尝试使用JavaScript单击按钮acceptButton时出现一个名为acceptModal的模式。然而,模态似乎没有出现,但背景确实变暗。有什么想法吗?

按钮

  -L <start>,<end>:<file>, -L :<funcname>:<file>

       Trace the evolution of the line range given by
       "<start>,<end>" (or the function name regex <funcname>)
       within the <file>. You may not give any pathspec
       limiters. This is currently limited to a walk starting from
       a single revision, i.e., you may only give zero or one
       positive revision arguments. You can specify this option
       more than once.

C#

<asp:button runat="server" type="button" CssClass="btn btn-success mr-xs mb-sm buttonwidth" Text="Accept" ID="acceptButton" OnClick="acceptButton_Click1"></asp:button>

模态

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

JS

<div class="modal right fade" id="acceptModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

        <div class="modal-header" style="background-color:#01d36b;box-shadow:0 2px 10px 0 rgba(0,0,0,.16)">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <p style="margin:0;padding:10px;color:#fff;font-size:18px;">Order Checkout</p>

            </div>

            <div class="modal-body" style="padding:10px;">
                <p>Hi<p>
            </div>

        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

如果要通过代码隐藏按钮显示模型,请点击acceptButton_Click1

,尝试以下代码
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$('#acceptModal').modal('show');");
sb.Append(@"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "DetailModalScript", 
                                        sb.ToString(), false);