单击模式中的按钮后如何显示引导警报？

Posted 2023-03-05

【中文标题】单击模式中的按钮后如何显示引导警报？

【英文标题】：How can i display a bootstrap alert after clicking a button in my modal?

【发布时间】：2020-08-19 03:28:00

【问题描述】：

我有一个带有“是”和“否”按钮的模式。单击“是”按钮时，模式关闭并发生 onclick 事件。在这一切发生之后，我想显示一个确认警报。但是到目前为止我尝试过的方法都没有对我有用。

以下是我的代码，其中包括模式和警报：

@Model.CategoryList.result
        @if (Model.CategoryList.result == "")
        
            int count = 0;

            foreach (String dataLine in Model.CategoryList.userData)
            

                string countString = count.ToString();
                string target = "dataLine" + countString;
                string trigger = "#" + target;
                string deleteHolder = dataLine.Split(Model.CategoryList.delimiterChar)[0];

                <p>
                    <a data-toggle="collapse" href="@trigger" role="button" aria-expanded="false" aria-controls="collapseExample">
                        @dataLine.Split(Model.CategoryList.delimiterChar)[0]
                    </a>

                    <button class="btn" onclick="location.href = '@Url.Action("Items", "Items")'; test(this.id)" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]"><i class="fas fa-plus secondaryPlusIcon" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]"></i></button>

                    <button class="btn" onclick="location.href = '@Url.Action("EditCategory", "EditCategory", new  id = dataLine.Split(Model.CategoryList.delimiterChar)[1], name = dataLine.Split(Model.CategoryList.delimiterChar)[0] )'; passCategoryPlaceHolder(this.id)" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]"><i class="far fa-edit secondaryEditIcon" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]"></i></button>

                    <button class="btn" data-toggle="modal" data-target="#[e-mail](Model.CategoryList.delimiterChar)[1]" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]"><i class="far fa-trash-alt secondaryDeleteIcon" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]"></i></button>
                </p>

                <div class="modal" id="[e-mail](Model.CategoryList.delimiterChar)[1]" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p>Are you sure you want to remove <b>@dataLine.Split(Model.CategoryList.delimiterChar)[0]</b> and all of its items?</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" id="displayAlertDelete" data-toggle="alert" data-target="#deleteAlert" onclick="location.href = '@Url.Action("DeleteCategoryLine", "Index", new  id = dataLine.Split(Model.CategoryList.delimiterChar)[1] )'">Yes</button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="alert alert-success" id="deleteAlert" role="alert">
                    This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
                </div>

                count++ 
            
        

我尝试过如下使用 jQuery：

 $("#deleteAlert").hide();
    $("#displayAlertDelete").on("click", function () 
        $("#deleteAlert").show();
    )

但是这会产生不希望的结果，模式会在 onclick 事件后闪烁并消失。所以我希望有一种不同的方式来做到这一点。

【参考方案1】：

你需要：

使用正确的 Bootstrap 方法隐藏模式， 等待模态框隐藏后再显示警报。

// hide modal upon button click
$("#displayAlertDelete").on("click", function () 
        $("#your_modal_id").modal('hide');
    )

// show alert after modal is hidden
$('#your_modal_id').on('hidden.bs.modal', function (e) 
  // show your alert

参考资料：

Bootstrap .modal('hide') Bootstrap Modal Events

【讨论】：

对于您的问题的第一部分，要隐藏的模态是包含“是”按钮的模态？

如果是这样的话，这个$("#displayAlertDelete").modal('hide');不应该包含模态的id而不是按钮的id吗？

你是对的，modal('hide') 应该是模态的 id。我很难说出您的示例中的模态 ID 是什么，所以我用“#your_modal_id”更新了上面的代码。