时间戳

首页 > 解决方案 > 单击模式中的按钮后如何显示引导程序警报？

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

问题描述

我有一个带有“是”和“否”按钮的模式。单击“是”按钮时，模式关闭并发生 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="#deleteHolder_@dataLine.Split(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="deleteHolder_@dataLine.Split(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 事件后闪烁并消失。所以我希望会有一种不同的方式来做到这一点。

标签： javascripthtmljqueryasp.nettwitter-bootstrap

解决方案

你需要：

  1. 使用正确的 Bootstrap 方法来隐藏模式，
  2. 在显示警报之前等待模态隐藏。
// 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
}

参考：

推荐阅读