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

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

如果你能分享一个URL我可以测试一下。那我试试看。此外尝试捕获 class 名称而不是 id。像下面这样的东西。

$('.modal').show();

Answer 2

当您调用 alert('df') 时，线程将被阻塞，直到您单击警报的 "Ok" 按钮，然后回发才会发生。

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

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

当您如下添加“return false”时，它将停止回发。

<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 模态弹出窗口无法正常工作

Asp.net bootstrap modal popup not working correctly

asp.net

modalpopup