Как я могу отобразить предупреждение bootstrap после нажатия кнопки в моем модале?

Question

У меня есть модал с кнопками «Да» и «Нет». При нажатии кнопки «Да» модальное окно закрывается, и происходит событие 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();
    })

Однако, это приводит к нежелательному результату, модальный режим будет всплывать sh и исчезать после события onclick. Так что я надеялся, что будет другой способ сделать это.

Answer 1

Вам необходимо:

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
}

Ссылки:

• Bootstrap .modal ('hide')
• Bootstrap Модальные события