Question

我正在尝试使用asp.net网格行按钮进行模态弹出，它用于警报但不能调用模态弹出窗口，我该如何解决？

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

 <asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();"
                                                                CssClass="GridDeletebtn" runat="server" />

<script>
function test() 
{
    $('#confirm').show();
    alert('df');
}
</script>

Answer 1

如果您可以共享我可以测试的网址。然后我会试试。此外，尝试捕获类名而不是id。有些事情如下。

$（＆＃39; .modal＆＃39）显示（）;

Answer 2

当您致电alert('df')时，线程将被阻止，直到您点击＆＃34;确定＆＃34;警报按钮然后会发生回发。

但是当你只显示模态对话框（没有alert）时，它不会阻止线程，因此会立即发回回。

因此，你的模态对话将在回发后消失。

当你添加`return false＆＃39;如下所示，它将停止回发。

<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();return false;" CssClass="GridDeletebtn" runat="server" />

脚本

<script>
   function test()
            {
                $('#confirm').modal('show');
                //alert('df');
            }
        </script>

HTML

<div id="confirm" class="modal hide fade" tabindex="-1" role="dialog">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

Answer 3

如果您使用gridview或repeater，则通过以下代码调用模式弹出窗口它为我工作

<a class="btn btn-sm btn-warning" data-toggle="modal" data-target="#Remark_Modal<%# Eval("PrimaryID")%>">
    <i class="fa fa-eye"></i>&nbsp;Details
</a>

<!--Modal-->
<div class="modal fade" id='Remark_Modal<%# Eval("PrimaryID")%>' role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content card-blue-fill">
            <div class="modal-header card-header">
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                    <i class="fa fa-2x fa-close"></i>
                </button>
                <h4 class="modal-title"><i class="fa fa-eye"></i>&nbsp; <%# Eval("MissionName")%></h4>
            </div>
            <div class="modal-body card-block">
                <%# Eval("Remark")%>
            </div>
        </div>
    </div>
</div>

Answer 4

在模式的开头使用ScriptManager标记，否则ScriptManager.RegisterStartupScript将不起作用。以下是我使用的解决方法。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"><asp:Label ID="errorMessage" runat="server" Text=""></asp:Label></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

隐藏代码

private void showModal(string error)
        {
            message.Text = error;
            upModal.Update();
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);
        }

使用适当的消息调用上述showModal（）函数。如果需要，您可能必须添加模态页眉和模态页脚。

Asp.net bootstrap模式弹出窗口无法正常工作

4 个答案: