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

Question

I have a modal that has a 'Yes' and 'No' button. When the 'Yes' button is clicked, the modal closes and an onclick event occurs. After all this happens, i would like to display a confirmation alert. However non of the methods i have tried so far have worked for me.

Below is my code which includes the modal and alert:

@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++ 
            }
        }

I have tried using jQuery as follows:

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

However this produces an undesirable result, the modal will flash and disappear after the onclick event. So i was hoping there would be a different way of doing this.

Answer 1

You need to:

1. use the proper Bootstrap method for hiding a modal,
2. wait for the modal to be hidden before showing alert.

// 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
}

References:

• Bootstrap.modal('hide')
• Bootstrap Modal Events