Question

我试图在按钮点击上打开一个模态。可以使用单击按钮打开模态

 <asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1" Text="View Details" />

我需要在函数结束时打开这个模态，但我不知道如何通过后面的c＃代码实现这一点。我试过了：

 protected void Button2_Click(object sender, EventArgs e)
 {
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$('#View1').modal('show');</script>", false);
 }

设计

 <!-- modal 1 -->
<div class="modal fade" id="View1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" runat="server">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="alert alert-success">

                <strong>Well done!</strong> Successfully Saved     
            </div>
        </div>
        <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
</div>
<!-- modal -->

Answer 1

我猜你的脚本在它试图引用的HTML实际呈现之前就已经运行了。您可以通过在渲染页面上执行查看源来轻松检查它。如果该启动脚本位于页面的上方而不是模式的HTML，则它不会起作用，因为脚本会在页面上呈现时立即运行，并且它在HTML之前运行渲染，所以它试图运行＆＃34;显示＆＃34;在一个尚不存在的元素上。你没有得到错误，因为jQuery的工作方式意味着如果它的选择器不匹配任何元素，它就不会执行你指定在所选元素上运行的任何命令（一个或多个）。

如果这是问题，您可以通过更改启动脚本轻松修复它，以便它不会运行＆＃34; show＆＃34;代码，直到整个页面加载完毕。这可以使用jQuery的标准＆＃34; document.ready＆＃34;语法（我在这里使用了速记版本）：

ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$(function() { $('#View1').modal('show'); });</script>", false);

您还需要确保您的页面中某处（<form>标记内）有ScriptManager控件：

<asp:ScriptManager runat="server"></asp:ScriptManager>

Answer 2

首先请确保将ScriptManager放在aspx页面的表单标签中。其次要确保代码在客户端工作。

请参阅以下代码： aspx代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="myModal" class="modal fade" role="dialog">
            <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>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:ScriptManager runat="server"></asp:ScriptManager>
    </form>
</body>

服务器端代码：

protected void Button1_Click(object sender, EventArgs e)
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append(@"<script language='javascript'>");
    sb.Append(@"$('#myModal').modal('show');");
    sb.Append(@"</script>");

    ClientScript.RegisterStartupScript(this.GetType(), "JSScript", sb.ToString());
}

Answer 3

可能存在两个问题：

您正试图在加载页面之前加载模型
您的模态ID不同

将 view1 更改为 div1

请尝试此代码

ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "
<script>$(document).ready(function(){$('#Div1').modal('sho‌w');});</script>", false);

如何从代码后面打开模态？

3 个答案: