Question

我想在删除按钮上创建一个确认窗口。我在这里找到一些例子bootstrap，但我们不清楚它们。

这是我的代码：

<form action="~/root/awards/DeleteAward" method="post" role="form">
    <div class="form-group">
        <input type="hidden" id="awardId" name="awardId" value="@award.Id">
    </div>
    <button type="submit" class="btn btn-danger">
        DELETE
        <i class="glyphicon glyphicon-remove-sign"></i>
    </button>
</form>

如何创建一个简单的模态窗口，只是“你确定吗？”是/否选项？

Answer 1

我已经创建了简单的警报供您参考，我希望这对您有帮助..

当用户点击按钮

时

  <button id="openmodalpopup" name="openmodalpopup" data-modal-action="openconfimdialog"
        data-id="45">
    </button>

<强>警报

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">
                    Confirmation!</h4>
            </div>
            <div class="modal-body">
                Are You Sure want to delete ?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    No</button>
                <button type="button" class="btn btn-primary" data-modal-action="yes">
                    Yes</button>
            </div>
        </div>
    </div>
</div>

<强>脚本

        var awardid= "";
        $("[data-modal-action=openconfimdialog]").click(function () {
            awardid= $(this).attr("data-id");
            $("#myModal").modal("show");
        });

/*  <button type="button" class="btn btn-primary" data-modal-action="yes"> Yes</button> */
// when user click yes, already you stored the value in id, you can pass the vales in ajax and delete action

        $("[data-modal-action=yes]").click(function () {
            //call the delete ajax method 
            //awardid= 45
           deleteAward(awardid)  //calling delete method
      $("#myModal").modal("hide");
        });


     function deleteAward(awardid) { 
          var postData = {
            id: awardid
        };
            $.ajax({
                type: "post"
                url: "url for the action"
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(postData),
                success: function (data) {
                    //do you actions
                }
            });
        }

如何在删除按钮上创建模态窗口？

1 个答案: